Angular 材料 2 在组件之间共享反应形式

Question

我有以下组件模板

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

<section>
  <mat-form-field>
    <input matInput formControlName="firstName" placeholder="First name" />
  </mat-form-field>
</section>

<child-component [form]="form"></child-component>

<button type="submit" mat-raised-button color="primary">
  <span>Submit</span>
</button>

</form>

以及下面的子组件模板

<section [formGroup]="form">
  <mat-form-field>
    <input matInput formControlName="emailAddress" placeholder="Email address" />
  </mat-form-field>
</section>

这两个字段都是在父组件中使用响应式方法定义的，并根据需要进行设置。

提交表单时，只有父组件内部的字段有mat-form-field-invalid类，并显示为红色。

虽然在 FormControl 实例中这两个字段都显示为无效。

我创建了以下 stackblitz 来重现该问题 https://stackblitz.com/edit/angular-material2-issue-7x45bp

Answer 1

最简单的方法是传入 FormControl 而不是表单：

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

  <section>
    <mat-form-field>
      <input matInput formControlName="firstName" placeholder="First name" />
    </mat-form-field>
  </section>

  <child-component [childControl]="form.get('emailAddress')"></child-component>

  <button type="submit" mat-raised-button color="primary">
    <span>Submit</span>
  </button>

</form>


<section>
  <mat-form-field>
    <input matInput [formControl]="childControl" placeholder="Email address" />
  </mat-form-field>
</section>

无论如何，这实际上对组件的可重用性更好（如果您还将占位符设为属性）。

否则，您可能需要让您的子组件实现 ControlValueAccessor。

Answer 2

如果我没记错的话，您的无效表单字段只有在被标记为已触摸后才会显示为红色，如果您愿意，您可以通过编程方式强制提交表单（只是不那么优雅，Reactive Forms - mark fields as touched）。

您的必填字段缺少通常存在于表单字段名称旁边的星号，以直观地指示该字段是必填的。要添加它，只需添加 required="true" 或 [required]="someFunctionThatChecksFieldHasRequiredValidatorInFormGroup(fieldName)"