@NgModule({
    imports: [
        ReactiveFormsModule,
    ],
})
export class AppModule {}

123456

export class EditComponent {
    constructor(
        private fb: FormBuilder,
    ) { }
}

12345

export class EditComponent {
    public form = this.fb.group({
        name: ['', Validators.required],
    });

    constructor(
        private fb: FormBuilder,
    ) { }
}

123456789

<form [formGroup]="form" (ngSubmit)="tapSubmit()">
    <div class="form-group row">
        <label for="name" class="col-md-3 col-form-label">称呼</label>
        <div class="col-md-9">
            <input type="text" class="form-control" formControlName="name" id="name" placeholder="请输入称呼">
        </div>
    </div>
    <div class="row">
        <button class="btn btn-primary offset-md-3">保存</button>
    </div>
</form>

1234567891011

this.form.patchValue({
    name: res.name,
});

123

export class EditComponent {
    public form = this.fb.group({
        name: ['', Validators.required],
        children: this.fb.array([])
    });

    constructor(
        private fb: FormBuilder,
    ) { }

    get children() {
        return this.form.get('children') as FormArray;
    }

    public addChild() {
        this.children.push(this.fb.group({
            name: ['', Validators.required],
            label: ['', Validators.required],
            required: [false],
            only: [false],
        }));
    }

    public removeChild(i: number) {
        this.children.removeAt(i);
    }
}

123456789101112131415161718192021222324252627

<form [formGroup]="form" (ngSubmit)="tapSubmit()">
    <div class="form-group row">
        <label for="name" class="col-md-3 col-form-label">称呼</label>
        <div class="col-md-9">
            <input type="text" class="form-control" formControlName="name" id="name" placeholder="请输入称呼">
        </div>
    </div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>名称</th>
                <th>别名</th>
                <th>是否必填</th>
                <th>不公开</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of children.controls; let i = index">
                <tr [formGroup]="item">
                    <td>
                        <input type="text" formControlName="name" class="form-control">
                    </td>
                    <td>
                        <input type="text" formControlName="label" class="form-control">
                    </td>
                    <td>
                        <input type="checkbox" formControlName="required" value="1"  >
                    </td>
                    <td>
                        <input type="checkbox" formControlName="only" value="1" >
                    </td>
                    <td>
                        <i class="iconfont icon-close" (click)="removeChild(i)"></i>
                    </td>
                </tr>
            </ng-container>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <i class="iconfont icon-plus" (click)="addChild()"></i>
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="row">
        <button class="btn btn-primary offset-md-3">保存</button>
    </div>
</form>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

for (const item of items) {
    this.children.push(this.fb.group(item));
}

123