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 在组件之间共享反应形式的主要内容,如果未能解决你的问题,请参考以下文章