ng2 将表单组作为参数发送到组件

Question

我有 FormGroup 包含子 FormGroup：

sub formGroup initalize:
    this.fg=new FormGroup({
        name: new FormControl(),
        abcFg: new FormGroup({
            aaa: new FormControl(),
            bbb: new FormControl()
        })
    });

我的主要组件包含 abcComponent:

@Component({
    selector: 'mainComponent',
    styles: [],
    providers: [],
    template: `
         <div *ngIf="fg">
             <form [formGroup]="fg">
                  <abcComponent></abcComponent>
             </form>
         </div>
         `

我想将子表单组 (abc) 作为参数（输入）发送到 abcComponent。

abc组件：

@Component({
    selector: 'abcComponent',
    styles: [],
    providers: [],
    template: `
         <div *ngIf="abcFg">
             <form [formGroup]="abcFg">
                 <input type="text" formControlName="aaa" />
                 <input type="text" formControlName="bbb" />
             </form>
         </div>
         `
export class AbcComponent{ 
    @input() public abcFg:FormGroup;
}

我试过这个：

<abcComponent [abcFg]="fg.controls[abcFg"]"></abcComponent>

但它不起作用...我该如何修复它？谢谢！

Answer 1

您可以像这样将 abcFg 的值传递给您的 abcComponent：

<abcComponent [abcFg]="fg.value.abcFg"></abcComponent>

然后在你的 abcComponent:

export class AbcComponent implements OnInit{ 
    @input() public abcFg;
    abcfgForm : FormGroup;

    constructor(private fb: FormBuilder){}

    ngOnInit(){
        this.abcfgForm = this.fb.group({
            aaa: [this.abcFg.aaa],
            bbb: [this.abcFg.bbb]
        });
    }
}

ng2 将表单组作为参数发送到组件

ng2 send formgroup to component as parameter

typescript

angular2-forms

angular2-template

angular