Question

我有一个模板驱动的表单，其中包含ngFor中包含的一组输入。

我正在尝试将＆＃39;子组＆＃39;它重复到它自己的子组件中，但我无法让父ngForm包含子组件中包含的验证。

以下是我所说的简化版本：

父模板：

<form #parentForm="ngForm">
    <input name="firstName" ngModel required>
    <input name="lastName" ngModel required>

    <child-component *ngFor="let child of children;"></child-component>
</form>

儿童模板：

<div>
    <input name="foo" required ngModel>
    <input name="bar" required ngModel>
</div>

我无法让父表单接收到required个孩子输入的内容。我尝试让孩子处于自己的形式，并将#parentForm实例传递给孩子，让孩子打电话：

this.parentForm.addFormGroup(this.childForm.form)

但这仍然无效。

我也有孩子这样做，反过来父母获得子表单的ContentChildren并将每个表单添加到表单中，但验证仍然不起作用。

我知道我可以让子组件实现ControlValueAccessor但是我需要实现一个我不愿意做的自定义验证器，因为没有一个验证实际上是新的，它只是required＆＃39; S

请帮我弄清楚为什么我不能向父母添加子表单并让它使用孩子的验证。

Answer 1

一种可能的解决方案可能是从子组件到父组件的添加控件，如下所示：

<强> child.component.ts

def xml = '''<?xml version="1.0" encoding="UTF-8"?>
<Record>
   <XYZ>
      <Header>
         <Code>12345</Code>
      </Header>
      <Details>
         <RecID>1</RecID>
         <RecordDetail>
            <Name>ABC</Name>
            <Email>abc@in.com</Email>
            <Address>123,acdf</Address>
         </RecordDetail>
      </Details>
      <Details>
         <RecID>2</RecID>
         <RecordDetail>
            <Name>ABC</Name>
            <Email>abc@in.com</Email>
         </RecordDetail>
      </Details>
   </XYZ>
</Record>'''

def parsedXml = new XmlSlurper().parseText(xml)

def builder = new groovy.xml.StreamingMarkupBuilder()
builder.encoding = 'UTF-8'
def transformedXml = builder.bind {
    mkp.xmlDeclaration() 
    Record {
        Header {
            Code (parsedXml.'**'.find{ it.name() == 'Code'})
        }
        def details = parsedXml.'**'.findAll{ it.name() == 'Details'}       
        details.each { detail ->
            Details {
                RecID (detail.RecID)
                detail.RecordDetail.children().each { fld ->
                    RecordDetail { 
                        FieldName (fld.name())
                        FieldValue (fld.text())
                    }
                }
            }
        }
    }
}

println groovy.xml.XmlUtil.serialize(transformedXml)

<强> Plunker Example

Answer 2

你可以使用属性绑定和@Input来解决你看起来像

的问题

<form #parentForm="ngForm">
    <input name="firstName" ngModel required>
    <input name="lastName" ngModel required>

    <child-component #parentForm.childForm="ngForm" [children]="children"></child-component>
</form>

在你的

中

将输入变量声明为
```
@Input() children:any[]=[];
```

修改模板如下

<div *ngFor="let child of children;">
   <input name="foo" required [(ngModel)]="child.foo"/>
</div>

Angular2模板驱动的子表单组件，带有验证

2 个答案: