我正在使用Angular 7和Angular Material实现注册页面。在这个页面中,我使用了一个密码输入组件,它获取对所用 FormGroup 的引用。外部组件处理逻辑部分(例如 FormGroup 的外观、FormControl 的定义方式以及每个输入的验证方式)。当我单击密码输入并单击其他位置/输入任何无效内容时,输入的错误消息将正确显示。但是当我点击提交按钮而不触摸任何输入字段时,FormGroup 的 FormControl 被验证(FormControl 甚至说它有错误)但没有被触摸,因此没有显示错误消息。
我已经查找了如何解决这种行为。一些人建议在单击提交按钮后手动将所有表单控件设置为触摸。是的,这行得通,但我想有一个通用的解决方案,所以我不必为将来的每一种表格都这样做。
注册组件.ts:
export class SignupComponent implements OnInit {
signupForm: FormGroup;
constructor() { }
ngOnInit() {
this.signupForm = new FormGroup({
'password': new FormControl('', [Validators.required]),
'contact': new FormControl('', [Validators.required])
});
}
onSubmit() {
console.log('Form validity: ' + this.signupForm.valid);
}
}
signup.component.html:
<mat-card class="signup-card">
<h1 class="signup-title">Sign up</h1>
<form [formGroup]="signupForm" #form="ngForm" (ngSubmit)="onSubmit()" fxLayout="column">
<!-- Password -->
<app-base-password-input [parentForm]="signupForm"></app-base-password-input>
<!-- Contact -->
<div class="signup-contact">
<mat-checkbox formControlName="contact" required>We may contact you.</mat-checkbox>
<mat-error *ngIf="form.submitted && signupForm.controls['contact'].hasError('required')">Please check this box.</mat-error>
</div>
<button class="signup-button" mat-raised-button color="primary" type="submit">Sign up</button>
</form>
</mat-card>
app-base-password-input.component.ts:
export class BasePasswordInputComponent {
@Input() parentForm: FormGroup;
constructor() { }
}
app-base-password-input.component.html:
<mat-form-field [formGroup]="parentForm">
<mat-label>Password</mat-label>
<input matInput type="password" formControlName="password" required>
<mat-error *ngIf="parentForm.controls['password'].hasError('required')">Password is required.</mat-error>
</mat-form-field>
我
的期望:当我单击提交按钮而不触摸/单击任何输入字段时,每个输入都会显示一条错误消息(嘿,用户!我是必需的!)。
实际发生
的情况:当我单击提交按钮而不触摸/单击任何输入字段时,只有外部组件中定义的 FormControls 显示错误消息(本例:联系复选框)。我的输入组件没有显示错误消息(本例:密码组件)。
我希望我发布了您回答我的问题所需的一切。如果还有不清楚的地方,我会更新帖子:)