Question

我的表单中有一个formArray，单击加号按钮时，它会重复两个字段（将它们添加到表单中）。看起来像这样：

现在，每当我单击加号按钮时，字段就会添加到表单上，但是，字段中的数据会重复。像这样：

我希望每次添加表单字段时，数据都不会重复。字段的添加次数没有限制，它们必须保持动态。

html中表单字段的代码为：

 <div formArrayName="formArray">
                    <div *ngFor="let control of formData.controls; let i = index" class="row">
                        <mat-card class="col-md-9 p-0">
                            <span [formGroup]="control">
                                <mat-form-field class="col-md-4 col-sm-6 ">
                                    <div class="pt-15"></div>
                                    <mat-select matInput formControlName="systemControl">
                                        <mat-option *ngFor="let system of availableSystems" [value]="system">
                                            {{ system.name }}
                                        </mat-option>
                                    </mat-select>
                                    <mat-error class="matChipError pr-5" *ngIf="formError?.systemControl">{{formError.systemControl}}</mat-error>
                                    <mat-autocomplete #autoSystem="matAutocomplete" (optionSelected)="selectedSystemEvent($event)">
                                        <mat-option *ngFor="let system of availableSystems" [value]="system">
                                            {{ system.name }}
                                        </mat-option>
                                    </mat-autocomplete>
                                    <mat-placeholder>system *</mat-placeholder>
                                </mat-form-field>
                                **<mat-form-field class="col-md-6 col-sm-6  pr-0">
                                            <div class="pt-15"></div>
                                            <mat-chip-list #chipListSystem>
                                                <mat-chip *ngFor="let system of systems" [selectable]="selectable" [removable]="removable" (removed)="removeSystem(system)">
                                                    {{system.name}}
                                                    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                                                </mat-chip>
                                                <input #systemInput formControlName="systemControl" [matAutocomplete]="autoSystem" [matChipInputFor]="chipListSystem" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                                                    [matChipInputAddOnBlur]="addOnBlur" (blur)="validate('systemControl')" />
                                                <mat-error class="matChipError pr-5" *ngIf="formError?.systemControl">{{formError.systemControl}}</mat-error>
                                            </mat-chip-list>
                                            <mat-autocomplete #autoSystem="matAutocomplete" (optionSelected)="selectedSystemEvent($event)">
                                                <mat-option *ngFor="let system of availableSystems" [value]="system">
                                                    {{ system.name }}
                                                </mat-option>
                                            </mat-autocomplete>
                                            <mat-placeholder>system*</mat-placeholder>
                                        </mat-form-field>
                            </span>
                            <button [hidden]="(i+1) != siteUserForm?.controls['formArray']?.controls.length" mat-icon-button type="button" color="lightBlue"
                                (click)="addInput()">
                                <mat-icon class="material-icons md-20">add_circle_outline</mat-icon>
                            </button>
                            <button [hidden]="siteUserForm?.controls['formArray']?.controls.length == 1" mat-icon-button type="button" color="lightBlue"
                                (click)="delInput(i)">
                                <mat-icon class="material-icons md-20" style="font-weight: normal">highlight_off</mat-icon>
                            </button>
                        </mat-card>
                    </div>**

.ts文件中添加/删除表单字段的代码为：

    addInput(): void {

    const arrayControl = <FormArray>this.siteUserForm.controls['formArray'];

    const newGroup = this.fb.group({
      systemControl: ['', [Validators.required]],
      systemRoleControl: ['', [Validators.required]]
    });
    arrayControl.push(newGroup);
  }

  delInput(index: number): void {
    const arrayControl = <FormArray>this.siteUserForm.controls['formArray'];
    arrayControl.removeAt(index);
  }

我了解到，每次我们在垫芯片中输入某些内容时，它都会输入到系统数组中，然后使用系统数组填充所有字段，即使是重复的字段也是如此。有办法避免重复吗？

将数据添加到芯片领域的代码：

  selectedStudyEvent(event: MatAutocompleteSelectedEvent): void {

const value = {
  studyRequestId: event.option.value,
  studyNumber: event.option.viewValue
};

if (this.studies.filter(e => e.studyNumber === event.option.viewValue).length === 0 && this.studies.length < 1) {
  this.studies.push(value);
  this.studyInput.nativeElement.value = '';
  this.siteUserForm.controls.studyControl.setValue(null);
  this.siteUserForm.controls.studyControl.disable();
}
this.validate('studyControl');

}

用于从mat-chip字段中删除系统数据的代码：

 removeSystem(system: any): void {
const index = this.systems.indexOf(system);

if (index >= 0) {
  this.systems.splice(index, 1);
}

}

任何帮助将不胜感激。谢谢！

如何避免在ngFor for FormArray循环的mat-chip-list中重复数据

0 个答案: