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

Posted

技术标签:

【中文标题】Angular 材料 2 在组件之间共享反应形式【英文标题】:Angular material 2 share reactive form between components 【发布时间】:2018-10-18 01:41:57 【问题描述】:

我有以下组件模板

<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

【问题讨论】:

【参考方案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。

【讨论】:

【参考方案2】:

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

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

【讨论】:

在为两个字段初始化 formGroup 时设置 required 标志。我希望这两个字段的行为相同,但是您可以在 stackblitz 中看到只有第一个字段按预期工作,即在提交后显示为红色 明白。我的回答站得住脚。祝你好运

以上是关于Angular 材料 2 在组件之间共享反应形式的主要内容,如果未能解决你的问题,请参考以下文章

Angular 材料:反应性与模板?

如何在两个组件之间使用Angular7(角度材料)拖放

如何在多个 Angular 2 项目之间共享一个 Angular 2 组件?

如何在Angular2中的组件之间共享数据[重复]

Angular 5-反应形式和动态形式之间的区别

Angular 2 Dart:如何在父组件与路由器和子组件之间共享变量?