小编Chr*_* K.的帖子

我正在使用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);
    }

}

注册.组件.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" …