无法创建嵌套的反应式表单 [英] unable to create a nested Reactive Form

问题描述

代码/演示位于 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>

helper.service.ts 中的

validateField 分配 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]+/)]],电子邮件:[null,[Validators.required,Validators.pattern(this.EMAIL_PATTERN)]],/*新的密码组和验证密码.他们每个人都应该匹配密码标准，并且该组应该验证密码和验证密码的值是否相同*/密码组:this.fb.group({密码:[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 错误:formGroup 需要一个 FormGroup 实例.请传入一个.

示例:

在你的课堂上:

this.myGroup = new FormGroup({firstName: new FormControl()});

解决方案

改变你的

进入

嵌套表单组使用 formGroupName

您可以在此处找到更多文档

The code/demo is at https://stackblitz.com/edit/angular-jx7fdu

I am trying to create a nested Reactive Form. It is a simple signup form. It has Firstname, Lastname, email, Password and VerifyPassword Field. I have also created validators for the fields. The html also assigns Bootstrap's classes depending on whether a field has errors or not.

<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 in helper.service.ts assigns Bootstraps is-valid and is-invalid classes for visual representation. app-show-errors component gives texttual representation of the error.

For verify password, I want to check that its value is same as that of password field. To do this, I have clubbed them into a FormGroup and am passing that FormGroup to the validator function.

In 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})

        });
      }

Now my main issue is that I am unable to get the nested form (passwordGroup) working. I am seeing the following error in the console.

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

解决方案

Change your

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

into

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

Nested form groups use formGroupName

You can find more documentation here

这篇关于无法创建嵌套的反应式表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！