Question

代码/演示位于https://stackblitz.com/edit/angular-jx7fdu

我正在尝试创建一个嵌套的反应形式。这是一个简单的注册表格。它具有Firstname，Lastname，email，Password和VerifyPassword字段。我还为这些字段创建了验证器。 html还会根据字段是否有错误来分配Bootstrap的{{1}}。

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()

Answer 1

更改您的

<div class="form-group" [formGroup]="passwordGroup">

进入

<div class="form-group" formGroupName="passwordGroup">

嵌套表单组使用formGroupName

您可以找到更多文档here

无法创建嵌套的反应式表单

1 个答案: