Angular2反應性表單錯誤顯示

我想通過製作聯繫表單來了解Angular2的反應性表單。這一切都很好，但有一個錯誤，似乎給我帶來了一些麻煩。當我使用Validators.required時，一切正常，但當我添加Validators.minLength或其他控件時，所有東西都會混亂起來，並且在瀏覽器的控制檯中出現此錯誤：Expected validator to return Promise or Observable.。我環顧四周，但我真的無法找到一個簡單的解釋/這裏是我的組件：Angular2反應性表單錯誤顯示

export class ContactRouteComponent { 
contactForm: FormGroup; 
reasons = REASONS; 

constructor(private fb: FormBuilder) { 
    this.createForm(); 
} 

createForm() { 
    this.contactForm = this.fb.group({ 
     name: ['', <any>Validators.required, <any>Validators.minLength(3)], 
     email: ['', <any>Validators.required], 
     reason: ['',<any>Validators.required], 
     message: ['', <any>Validators.required] 
    }); 

    // AFISEAZA MESAJE EROARE 
    this.contactForm.valueChanges.subscribe(data => this.onValueChanged(data)); 
    this.onValueChanged(); 
} 

onSubmit() { 
    console.log(this.prepareContactForm()); 
    this.contactForm.reset(); 
} 

prepareContactForm() { 
    const formModel = this.contactForm.value; 

    const contactValues: Contact = { 
     name: formModel.name as string, 
     email: formModel.email as string, 
     reason: formModel.reason as string, 
     message: formModel.message as string 
    }; 

    return contactValues; 
} 

onValueChanged(data?: any) { 
    if(!this.contactForm) { return; } 
    const form = this.contactForm; 

    for(const field in this.formErrors) { 
     // clear previous messages 
     this.formErrors[field] = ''; 
     const control = form.get(field); 

     if(control && control.dirty && !control.valid) { 
      const messages = this.validationMessages[field]; 
      for(const key in control.errors) { 
       this.formErrors[field] += messages[key] + ' '; 
      } 
     } 
    } 
} 

formErrors = { 
    'name': '', 
    'email': '', 
    'reason': '', 
    'message': '' 
} 

validationMessages = { 
    'name': { 
     'required': 'Name is required', 
     'minLength': 'Name has to be...' 
    }, 
    'email': { 
     'required': 'Name is required' 
    }, 
    'reason': { 
     'required': 'Name is required' 
    }, 
    'message': { 
     'required': 'Name is required' 
    } 
} 

}

來源

2017-04-18 AugustinIT

當你有多個驗證規則，你必須將它們插入一個數組裏面這樣：

this.fb.group({ 
     password: ['', [ Validators.required, Validators.minLength(5)] ] 
    })

更新到角V5

最近的一個實現，而不FormBuilder：

form = new FormGroup({ 
    email: new FormControl('', 
    Validators.compose([ Validators.minLength(5), Validators.email ])), 
});

來源

2017-04-18 22:13:11

當你在表單生成器添加多個驗證器，你應該使用數組的驗證[]括號

this.contactForm = this.fb.group({ 
    name: ['', 
     [Validators.required, Validators.minLength(3)] 
    ], 
    email: ['', Validators.required], 
    reason: ['', Validators.required], 
    message: ['', Validators.required] 
});

來源

2017-07-12 14:10:32

Angular2反應性表單錯誤顯示

回答

相關問題