Question

我有一个带有FormGroup的父组件。在我的html代码中，我多次调用一个名为my-text-input的子组件作为示例。在这个子组件中，我有一个带有特定attribut FormControlName的输入文本。我想将此控件添加到我的主窗体中。

我的主要组件是formGroup：

<form class="form-horizontal" [formGroup]="mainForm" (ngSubmit)="save()" 
novalidate>
 <div class="devis-container">
 ...
<!-- first call of my child component -->
<my-input-text [parent]="mainForm" [model]="myObject.name" class="size-xl" 
[required]="true"></my-input-text>
...
<!-- and in another part of the main form, another declaration -->
<my-input-text [parent]="mainForm" [model]="myObject.surname" class="size-
xl" [required]="true"></my-input-text>
...
</div>
</form>

我的子组件的HTML：

<form [formGroup]="parent" name="inputTextForm">
    <input type="text" formControlName="textField" placeholder="{{placeholder}}" class="domia-input"/>
    ...    
</form>

所以我的问题是我不知道如何将我的控件'textField'添加到我的主窗体中。我试过这个：

export class MyInputTextComponent extends InputBaseComponent implements OnInit {
    ...
    @Input()
    parent: FormGroup;
    ...
    ngOnInit() {
     this.parent.addControl('textField', 
        new FormControl('', 
            Validators.compose([conditionalRequired(this.required), 
            Validators.pattern(this.regex), 
            Validators.minLength(this.minlength), 
            Validators.maxLength(this.maxlength)]))            
        );
    this.parent.controls.textField.setValue(this.model);
    }
    ...

但是两个“我的输入文本”的值是相同的。我发现这是合乎逻辑的，因为它与我认为的形式控制相同。所以，我在我的子组件的OnInit方法中尝试了另一种解决方案：

this.parent = this.formBuilder.group({ 
    textField: [this.model, conditionalRequired(this.required)]
});

在这种情况下，值是可以的，但我在mainForm中看不到这个控件。我认为这是合乎逻辑的，因为我没有将我的控件添加到我的父/主窗体。

我试图在官方文档页面上找到一些示例，但我没有找到这个具体案例。另一个解决方案应该是在我的主要组件的方法BuildForm中声明控件textField，但我想找到另一个解决方案并在子组件中声明控件。

感谢您的帮助。

Answer 1

您无法添加此类组件。您必须使用factoryresolver查找对组件的引用并添加它。看看这个帖子 How to place a dynamic component in a container

Angular 4 / Reactive Forms - 在子组件中添加控件

1 个答案: