Angular 2创建嵌套组件的反应形式
问题描述:
我的需求是我需要创建一个嵌套组件的表单。 我正在为每个表单字段创建组件,对于文本框会有 是一个组件,对于单选按钮,会有另外一个组件,比如wise。 <form [formGroup]="myForm">
Angular 2创建嵌套组件的反应形式
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>
而且我想用活性形式创建这个形式,我希望我的 HTML是不变仅透过打字稿有我的表单验证。
但我无法找到任何解决方案我们如何能够与 组件嵌套的反应形式。
答
经过我的研究&实验,我发现一个答案给我的问题,所以自己回答。如果它节省了一些人的时间,那么我会很高兴。
如果你想创建一个嵌套的组分反应形式,那么你可以做如下
我在这里创建一个表单有两个嵌套组件一个文本框&其他的单选按钮
你父组件可以像这样
<form [formGroup]="myForm">
<child-textbox-component [parentFormGroup]="myForm">
</child-textbox-component>
<child-radio-button-component [parentFormGroup]="myForm">
</child-radio-button-component>
</form>
我们传递FormGroup对象作为输入已在父组件 被创建为输入到子组件的子组件S,他们将利用这一FormGroup对象在他们的 组件设计之类的特定控制
你的孩子的组件会是这样
儿童文本分量
<div class="form-group" [formGroup]="parentFormGroup">
<label>
{{control.caption}}
</label>
<input class="form-control" type="text" [title]="control.toolTip"
[attr.maxlength]="control.width" [name]="control.name"
[value]="control.defaultValue" [formControlName]="control.name"/>
</div>
儿童放射按钮组分
<div class="form-group" [formGroup]="parentFormGroup">
<label>
{{control.caption}}
</label>
<div>
<label *ngFor="let value of control.values; let idx = index"
class="radio-inline" [title]="control.tooltip">
<input type="radio" [name]="control.name" [formControlName]="control.name"/>
{{ value }}
</label>
</div>
</div>
下面是要显示这些模型类保持数据控制10个子组件。
这样你就可以使用嵌套组件 生成你的表单,这样你就不需要在单个的 组件中拥有你的表单(可以说大表单)。您可以将其分解为多个子组件&表单将 易于创建&还可以使用角2的反应形式进行维护。您也可以轻松添加验证。
我回答这个
答
只是通过相同或子formGroup在形式与块[formGroup]结合之前,接着这些链接。
也许每个组件都会保留它自己的验证器。在提交时,每个组件通过服务或事件发射器将值发送给父组件...未测试,但是这应该起作用 – mickdev
我无法在子组件中的html中添加formControlName属性(这对于反应形式是必需的) ,它是抛出父指令的错误fromGroup不存在(因为它存在于父项中) –
这就是为什么每个组件都应该保留它自己的formControlName和验证器。父组件角色将实例化表单并获取提交的所有数据。子组件将触发有效或错误事件并通知父级允许或不允许提交...查看[嵌套模型驱动表单](https://scotch.io/tutorials/how-to-build-nested -model-driven-forms-in-angular-2) – mickdev