找不到带有名称电子邮件的控件，也找不到带有名称 pwd 的控件提交未定义

Question

我们正在尝试使用响应式表单验证来验证表单。它似乎在控制台上不起作用——它显示错误——找不到电子邮件名称的控件，也找不到pwd名称的控件。这是一个简单的签到表。这是代码：

<form action="" [formGroup]="customerSigninForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text"
id="email"
formControlName="email"
>
<span
*ngIf="!customerSigninForm.get('customerData.email').valid && customerSigninForm.get('customerData.email').touched"
class="help-block">Please enter a valid email!</span>
</div>
<div class="form-group">
<input class="form-control form-control-lg" placeholder="Password" type="password"
formControlName="pwd"   
>
<span
*ngIf="!customerSigninForm.get('customerData.pwd').valid && customerSigninForm.get('customerData.pwd').touched"
class="help-block">Please enter a valid password!</span>
</div>
<div class="form-group">
<div class="extra-btns align-items-center">
<button class="btn btn-link ">Forget Password</button>
<button class="btn btn-link ">Forget Password</button>
</div>
<div>
<button type="submit" class="  btn form-btn btn-lg btn-block">Sign In With Email</button>
</div>
</div>
</form>

这里还有打字脚本

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-customer-signin',
templateUrl: './customer-signin.component.html',
styleUrls: ['./customer-signin.component.css']
})
export class CustomerSigninComponent implements OnInit {
genders = ['male', 'female'];
customerSigninForm: FormGroup;
constructor() {}
ngOnInit() {
this.customerSigninForm = new FormGroup({
'customerData': new FormGroup({
'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
'pwd': new FormControl(null, [Validators.required,
Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&].{8,}')
])
}),
});
}
onSubmit() {
this.customerSigninForm.reset();
}
}

当然，反应式表单模块包含在应用程序模块中：(在浏览器上，除了这些控制台错误之外，如果您键入一些内容或单击某个按钮，验证器也不会发出任何消息。只是控制台错误和以前的简单UI。如何解决这个问题？怎么了？

Answer 1

您在customerSigninForm中有一个嵌套的表单组customerData，因此要访问该组中的email和pwd控件，这些输入必须在具有formGroupName="customerData"的另一个元素中。例如：

<form action="" [formGroup]="customerSigninForm" (ngSubmit)="onSubmit()">
<div class="form-group" formGroupName="customerData">
<input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text" id="email" formControlName="email"/>
<span *ngIf="!customerSigninForm.get('customerData.email').valid && customerSigninForm.get('customerData.email').touched" class="help-block">Please enter a valid email!</span>
</div>
<div class="form-group" formGroupName="customerData">
<input class="form-control form-control-lg" placeholder="Password" type="password" formControlName="pwd"/>
<span *ngIf="!customerSigninForm.get('customerData.pwd').valid && customerSigninForm.get('customerData.pwd').touched" class="help-block">Please enter a valid password!</span>
</div>
<div class="form-group">
<div class="extra-btns align-items-center">
<button class="btn btn-link ">Forget Password</button>
<button class="btn btn-link ">Forget Password</button>
</div>
<div>
<button type="submit" class="  btn form-btn btn-lg btn-block">Sign In With Email</button>
</div>
</div>
</form>

但我真的不明白你为什么需要它，只需使用：

this.customerSigninForm = new FormGroup({
'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
'pwd': new FormControl(null, [Validators.required,
Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&].{8,}')
])
});

并在html:中进行相应的更改

<form action="" [formGroup]="customerSigninForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text" id="email" formControlName="email"/>
<span *ngIf="!customerSigninForm.get('email').valid && customerSigninForm.get('email').touched" class="help-block">Please enter a valid email!</span>
</div>
<div class="form-group">
<input class="form-control form-control-lg" placeholder="Password" type="password" formControlName="pwd"/>
<span *ngIf="!customerSigninForm.get('pwd').valid && customerSigninForm.get('pwd').touched" class="help-block">Please enter a valid password!</span>
</div>
<div class="form-group">
<div class="extra-btns align-items-center">
<button class="btn btn-link ">Forget Password</button>
<button class="btn btn-link ">Forget Password</button>
</div>
<div>
<button type="submit" class="  btn form-btn btn-lg btn-block">Sign In With Email</button>
</div>
</div>
</form>

我也认为现代浏览器接受这些，但通常关闭输入标签更好，例如

<input ... />

Answer 2

onSubmit()应从ngOnInit(){}中退出试试这个：

ngOnInit() {
this.customerSigninForm = new FormGroup({
'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
'pwd': new FormControl(null, [Validators.required,
Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&].{8,}'),
]);
});
}
onSubmit() {
console.log(this.customerSigninForm);
this.customerSigninForm.reset();
}