如何恢复嵌套表单中输入表单字段的值

Question

我有一个复选框列表，当我选中其中一个复选框时，会出现一个输入表单。我的问题是如何恢复此输入表单的价值？

这是我的 ts 组件:

 coveragestypes : Array<String> = [];
constructor(private coverageService : CoverageService) { }
policyForm = new FormGroup({
policyNumber : new FormControl('', Validators.required),
damageNumber : new FormControl('', Validators.required),
coverages :new FormArray([], this.minSelectedCheckboxes(1)),
policyConditions : new FormControl('')
 })

ngOnInit() {
 this.getcoveragestype()
 }

getcoveragestype(){
 this.coveragestypes = this.coverageService.getCoverages() ;
 this.addCheckboxes();
}
addCheckboxes() {
 this.coveragestypes.forEach(() => this.coverageFormArray.push(new FormControl(false)));
}
get coverageFormArray() {
  return this.policyForm.controls.coverages as FormArray;
}
}

这是我的 html :

 <div class="col-md-4 no-padding-left">

        <span style="font-size: small ;">policyNumber</span>
        <input type = "text" class="k-textbox form-control"
            formControlName="policyNumber">
    </div>

    <div class="col-md-4 no-padding-left">
        <span style="font-size: small ;">damageNumber</span>
        <input type="text" class="k-textbox form-control"
            formControlName="damageNumber">
    </div>
    <div class="col-md-4 no-padding-left">
        <span style="font-size: small ;">coverages</span>
        <div class="checkbox">
            <label formArrayName="coverages" *ngFor="let coverage of coverageFormArray.controls;let i = index; ">
                <input type="checkbox" kendoCheckBox [formControlName]="i" />
                {{coveragestypes[i]}}
                <ng-container *ngIf="coverage.value">
                    <input type="text"  >
                </ng-container>
            </label>
        </div>
    </div>

Answer 1

您需要在 FormControl 或变量中“存储”。您可以在 formGroup

中创建一个新的 FormArray

 policyForm = new FormGroup({
    ...
    coverages :new FormArray([], this.minSelectedCheckboxes(1)),
    coveragesValue:new FormArray([])
 })

然后您需要在函数 addCheckboxes 中将 FormControl 添加到 coveragesValue formArray。你的 .html 必须像

<input type="text" [formControl]="policyForm.get('coveragesValue.'+i)  >

或者更好的是，您的 FormArray 可以是 FormGroups 的 FormArray，而不是 FormControls 的 FormArray。在这种情况下，您有

coverages :new FormArray([], this.minSelectedCheckboxes(1)),

添加元素时添加 FormGroup

addCheckboxes() {
 this.coveragestypes.forEach(() => this.coverageFormArray.push(
    new FormGroup({
     check:new FormControl(false)
     value:new FormControl(null)
    }));
}

然后你 html 变成：


    <form [formGroup]="policyForm">
        <div formArrayName="coverages" class="checkbox">
            <!--in the *ngFor use [formGroupName]-->
            <div *ngFor="let coverage of coverageFormArray.controls;let i = index; " [formGroupName]="i">
                <label >
            <!--use formControlName for the checkBox-->
            <input type="checkbox" formControlName="check" />
            {{coveragestypes[i]}}
            </label>
            <ng-container *ngIf="coverage.value.check">
               <!--use formControlName for the input-->
               <input type="text" formControlName="value" >
            </ng-container>
            </div>
        </div>
    </form>

你看，如果你使用 FormControls 的 FormArray - 你的代码 - 你使用 [formControlName]="i" 来获取 formControl 的值，如果你使用 FormGroups 的 FormArray，你声明 [formGroupName]="i" a div 并在 formControlName

中使用

如何恢复嵌套表单中输入表单字段的值

How can I recuperate the value of an input form field in a nested form

forms

angular

angular-reactive-forms