Angular 2创建嵌套组件的反应形式

我的需求是我需要创建一个嵌套组件的表单。我正在为每个表单字段创建组件，对于文本框会有是一个组件，对于单选按钮，会有另外一个组件，比如wise。
<form [formGroup]="myForm"> <textbox-component></textbox-component> <radioButton-component></radioButton-component> </form>Angular 2创建嵌套组件的反应形式

而且我想用活性形式创建这个形式，我希望我的 HTML是不变仅透过打字稿有我的表单验证。

但我无法找到任何解决方案我们如何能够与组件嵌套的反应形式。

来源

2017-03-01 Mahesh Saibalwar

也许每个组件都会保留它自己的验证器。在提交时，每个组件通过服务或事件发射器将值发送给父组件...未测试，但是这应该起作用 – mickdev

我无法在子组件中的html中添加formControlName属性（这对于反应形式是必需的），它是抛出父指令的错误fromGroup不存在（因为它存在于父项中） –

这就是为什么每个组件都应该保留它自己的formControlName和验证器。父组件角色将实例化表单并获取提交的所有数据。子组件将触发有效或错误事件并通知父级允许或不允许提交...查看[嵌套模型驱动表单]（https://scotch.io/tutorials/how-to-build-nested -model-driven-forms-in-angular-2） – mickdev

经过我的研究&实验，我发现一个答案给我的问题，所以自己回答。如果它节省了一些人的时间，那么我会很高兴。

如果你想创建一个嵌套的组分反应形式，那么你可以做如下

我在这里创建一个表单有两个嵌套组件一个文本框&其他的单选按钮

你父组件可以像这样

<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的反应形式进行维护。您也可以轻松添加验证。

我回答这个

来源

2017-03-06 07:03:46

你如何对子组件进行验证？我们可以在子组件添加验证还是在父组件上定义所有验证？你可以发布你的.ts文件代码 –

这个答案看起来很有用，但它不完整。你可以请你张贴你的TS码吗？也就是说，如何以及在哪里设置FormGroup对象及其控件。 – sgroves

你可以按照这个教程这个真棒https://toddmotto.com/component-architecture-reactive-forms-angular#the-presentational-form – Tabares

只是通过相同或子formGroup在形式与块[formGroup]结合之前，接着这些链接。

来源

2018-01-05 07:42:50

Angular 2创建嵌套组件的反应形式

回答

相关问题