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

如果我没有弄错的话，您的无效表单字段只会在标记为已触摸后显示为红色，如果您愿意，可以在表单提交上强制执行（只是不那么优雅，{{3 }}）。

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

Answer 2

最简单的方法是传入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。

角形材料2在部件之间共享反应形式

2 个答案: