问题描述
限时送ChatGPT账号..代码/演示位于 https://stackblitz/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-componentponent.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/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-componentponent.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屋!
更多推荐
[db:关键词]
发布评论