Question

我有一个子组件调用app-account，其中包含一个带有某些输入字段的提交表单，这些输入字段的有效性类似

this.user = this.fb.group({
        usrname: new FormControl('', Validators.compose([Validators.required])),
        password: new FormControl('', Validators.compose([Validators.required, Validators.minLength(6)]))});

和HTML模板

<form [formGroup]="user" (ngSubmit)="onSubmit()">

<mat-form-field>
    <input matInput placeholder="Account" formControlName="usrname">
    <mat-error *ngIf="!!user.controls.usrname.errors?.required">{{usrrequire_msg}}
    </mat-error>
</mat-form-field>

<mat-form-field>
    <input matInput type="password" placeholder="Password" formControlName="password">
    <mat-error *ngIf="!!user.controls.password.errors?.required">
        {{pwrequire_qmsg}}
    </mat-error>
    <mat-error *ngIf="!!user.controls.password.hasError('minlength')">
        {{pwminimum_msg}}
    </mat-error>
</mat-form-field>

我将此组件像子组件一样嵌入到父组件HTML

<app-account></app-account>

并且在父组件中，我有一个提交按钮

布局可以很好地加载，但是当我单击父级组件的提交按钮时，单击或触摸子级输入字段=>没有显示任何错误验证消息吗？

我该如何解决，谢谢！

Answer 1

仅将[formControl] .markAsTouch（）与[formControl]一起使用是子组件的表单控件...此方法将执行操作，例如使用触摸或单击此字段。然后显示验证消息。

如何在不单击或触摸Angular的情况下从父组件验证子组件

1 个答案: