Код / демо находится на https://stackblitz.com/edit/angular-jx7fdu
Я пытаюсь создать вложенную реактивную форму. Это простая форма регистрации. Он имеет Firstname, Lastname, email, Password и VerifyPassword Поле. Я также создал валидаторы для полей. html также присваивает Bootstrap classes в зависимости от того, есть ли в поле ошибки или нет.
<input id="firstname" type="text" class="form-control" formControlName="firstName" [ngClass]="validateField(signupForm,'firstName')" >
<app-show-errors [control]="signupForm.controls.firstName"></app-show-errors>
validateField в helper.service.ts назначает Bootstraps is-valid и is-invalid классы для визуального представления. app-show-errors компонент дает текстовое представление об ошибке.
Для verify password я хочу проверить, что его значение совпадает со значением поля password. Для этого я скомбинировал их в FormGroup и передаю FormGroup в функцию проверки.
В signup-component.component.ts
createForm(){
this.signupForm = this.fb.group({
firstName:[null,[Validators.required,this.helper.validateName]], lastName:[null,[Validators.required,Validators.pattern(/[A-Za-z]+/)]],
email:[null,[Validators.required,Validators.pattern(this.EMAIL_PATTERN)]],
/*new group for password and verify password. Each of them should match the password criteria and the group should validate that the values of password and verify password is same*/
passwordGroup:this.fb.group({
password:[null,[Validators.required,Validators.minLength(8),this.helper.validatePassword]], confirmPassword:[null,[Validators.required,Validators.minLength(8),this.helper.validatePassword]]
},{validator:this.helper.confirmPasswordValidator})
});
}
Теперь моя главная проблема в том, что я не могу заставить работать вложенную форму (passwordGroup). Я вижу следующую ошибку в консоли.
ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});