angular11 - 如何在表单数组中使用多个表单组

Question

<div formArrayName="partners" style="margin-top:15px;" *ngIf="partner">
<div *ngFor="let partner of partners().controls; let i = index" [formGroupName]="i">
    <div class="partner-background">
        <div class="row">
            <div class="col col-12">
                <h6 style="padding:5px;">Manage Partner <button id="remove" class="btn" style="float:right;" *ngIf="partners().length > 1 && i>0" (click)="removePartner(i)"><i class="fas fa-minus-circle"></i></button></h6>
            </div>
            <div class="col col-6">
                <div class="input-group mb-3 mt-1">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Full Name</span>
                    </div>
                    <input type="text" class="form-control" formControlName="p_first_name">
                </div>
            </div>
            <div class="col col-6">
                <div *ngFor="let type of types().controls; let j = index" [formGroupName]="j">
                    <div class="row" style="margin-top:5px;">
                        <div class="col col-3">
                            <label for="type" style="font-size:18px;">Type</label>
                        </div>
                        <div class="col col-4">
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="urban">
                                <label class="form-check-label">Urban</label>
                            </div>
                        </div>
                        <div class="col col-4">
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="rural">
                                <label class="form-check-label">Rural</label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col col-6">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">DOB</span>
                    </div>
                    <input type="text" class="form-control" formControlName="p_dob">
                </div>
            </div>
            <div class="col col-6">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Sex</span>
                    </div>
                    <!-- <input type="text" class="form-control" formControlName="p_sex"> -->
                    <select class="form-control" formControlName="p_sex">
                        <option value="" selected>Select sex</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="other">Other</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col col-6">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Email</span>
                    </div>
                    <input type="text" class="form-control" formControlName="p_email">
                </div>
            </div>
            <div class="col col-6">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Phone No</span>
                    </div>
                    <input type="text" class="form-control" formControlName="p_phone">
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

大多数情况下，您需要在一个表单组内添加多个表单控件或在表单数组内添加多个表单控件。

对于复选框，您需要像这样在一个 formArray 中添加多个表单控件。

const arr = [this.fb.control(false), this.fb.control(false)];
fbArray =  this.fb.array(arr);
const form = this.fb.group({
    checkbox: fbArray,
});