我的表单中有一个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);
}
}
任何帮助将不胜感激。谢谢!