首页 文章

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

提问于
浏览 次
1

我有以下组件模板

<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

angular-material2

2 回答

  • 0

    如果我没有弄错的话，你的无效表单字段只有在被标记为被触摸后才会显示为红色，如果您愿意，可以在表单提交上强制执行（只是不那么优雅，Reactive Forms - mark fields as touched） .

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

    回复于
  • 0

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

    回复于

相关问题