Angular 7 - 提交表单时如何在表单的子组件中显示错误信息

Question

我正在使用 Angular 7 和 Angular Material 实现一个注册页面。在此页面中，我使用了一个密码输入组件，该组件获取对使用的 FormGroup 的引用。外部组件处理逻辑部分（f.e。FormGroup 的外观、FormControl 的定义方式以及每个输入的验证方式）。当我点击密码输入并点击某处 else/enter 任何无效内容时，输入的错误消息会正确显示。但是当我单击提交按钮 而不触及任何输入字段时 ，FormGroup 的 FormControl 被验证（FormControl 甚至说它有错误）但没有被触及，所以 没有显示 错误消息。

我已经查过如何解决这个问题。有些人建议在单击提交按钮后手动将所有表单控件设置为已触摸。是的，这行得通，但我想有一个通用的解决方案，这样我以后就不必为我所有的表格都这样做了。

signup.component.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>

我的期望：
当我在任何输入字段上单击没有 touching/clicking 的提交按钮时，每个输入都会显示一条错误消息（f.e。嘿，用户！我需要！）。

实际发生了什么：
当我在任何输入字段上单击没有 touching/clicking 的提交按钮时，只有外部组件中定义的 FormControls 显示错误消息（本例：联系人复选框）。我的输入组件没有显示任何错误消息（本例：密码组件）。

我希望我 post 提供了您回答我的问题所需的一切。如果还有什么不清楚的地方，我会更新 post :)

Answer 1

正如您所说，我知道的唯一方法是在 onSubmit() 方法中手动将每个 FormControl 设置为 "touched"。

SignupComponent.ts

onSubmit(){
    console.log('Form validity: ' + this.signupForm.valid);
    touchAllElements(this.signupForm);
}

touchAllElements(formGroup:FormGroup){
    Object.keys(formGroup["controls"]).forEach(element => {
        formGroup.get(element).markAsTouched();
    });
}

为避免在每个具有表单的组件中重复此方法，您可以将 touchAllElements 移动到服务

Angular 7 - 提交表单时如何在表单的子组件中显示错误信息

Angular 7 - How to show error messages in child components of form when submitting the form

forms

submit

angular

formgroups