角度验证：在按钮单击时验证/突出显示子输入

Question

在这里使用 Angular 6：

我有一个父组件，其中我有一个子组件。子组件有一个文本字段。父级有一个提交按钮。

在提交点击按钮上，我想根据需要验证孩子的所有输入并相应地抛出错误。

我正在使用响应式表单，并且能够成功地将表单信息从父级传递给子级。但是我不确定单击提交按钮时如何突出显示我的文本输入。

我在我的孩子身上使用了 $touched 属性，它可以正常工作并显示所需的错误。但我希望在用户刚刚单击按钮的情况下也显示错误。

这是一些相关的代码。

--Parent--

<form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <child [myForm]="myForm"></child>
  <button type="submit">Submit</button>
</form>

<br>
Form Valid:  <pre>{{myForm.valid}}</pre>

export class AppComponent {
  myForm: FormGroup

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      uname: ['', Validators.required]
    });
  }

  onSubmit() {
    console.log('value: ', this.myForm.value);
    console.log('the whole form and its controls: ', this.myForm)
  }
}

--Child--

<div class="form-group" [formGroup]="myForm">
    <label for="myForm" class="col-sm-3 control-label">Name:</label>
    <div class="col-sm-8" [ngClass]="{ 'has-error': myForm.controls?.uname.errors }">
      <input type="text" formControlName="uname"  placeholder="Enter Name...">
      <em *ngIf="myForm.hasError('required', 'uname') && myForm.controls?.uname.touched">*Required</em>
    </div>
  </div> 

export class ChildComponent {
  @Input() myForm: FormGroup;

  ngOnInit() {

  }
}

我还创建了一个演示来展示它：

https://stackblitz.com/edit/angular-dbevnj

仅供参考，这只是我为显示我的问题而创建的示例。我将有 2-3 个子组件，每个子组件很少。

任何输入如何解决这个问题？

Answer 1

我们通过在提交表单时在所有表单控件上调用 markAsTouched 解决了这个问题。

在您的情况下，您可以将 this.myForm.get('uname').markAsTouched(); 添加到您的 onSubmit() 方法中。