カスタムコンポーネント内の角型コントロール

Question

私は複雑なテンプレートドリブンフォームを作成しています。角型2では、APIからグループとフィールドの構造を取得します。 APIは、フィールドおよび/またはサブグループを含むことができるグループを含むJSONオブジェクトを送信します。 グループはサブグループを持つことができるので、これを処理する最も簡単な方法は、入力パラメータ "Group"を取るカスタムコントロール、FieldGroupComponentを持たせることです。グループにサブグループが含まれている場合、 FieldGroupComponentを使用します。

問題は、ngFormがFormControlsとしてFieldGroupComponentの入力コントロールを認識しないことです。 ngFormはコントロールを持たないと判断し、フィールドが無効であることを認識しません。

<form ngForm (ngSubmit)="submitForm()"> 
    <field-group *ngFor="let group of FormGroups" [group]="group"></field-group> 
</form> 

そしてFieldGroupComponent：

@Component({ 
    selector: "field-group", 
    templateUrl: "./field-group.component.html" 
}) 
export class FieldGroupComponent { 
    @Input("group") group; 
} 

そしてFieldGroupComponentテンプレート：

フォームページは次のようになります

<fieldset> 
    <h1>{{group.Title}}</h1> 
    <div *ngFor="let field of group.Fields"> 
    ... render field ... 
    </div> 
    <div *ngFor="let subGroup of group.FieldGroups"> 
    <field-group [group]="subGroup"></field-group> 
    </div> 
</fieldset> 

Answer 1

私は単純にNgFormを渡して終了

FieldGroupComponentを@Inputとして設定し、フィールドコントロールをfor M：

@Input("form") form: NgForm; 
@ViewChildren(NgModel) private formControls: QueryList<NgModel>; 

ngAfterViewInit(): void { 
    this.formControls.forEach((item: NgModel) => this.form.addControl(item)); 
}