晚上好，我有一個問題，我使用的是反應式表單，FormArray，我有一個按鈕可以根據需要多次添加 2 個選項，問題是這些選項是 matselects，在其中一個選擇中我使用了一個事件（更改），問題是第一次添加選項時，onchange 作業正常，但是當添加選項超過2 倍時，之前在matselects 中選擇的值會發生變化，因為重新執行了創建的select 的onchange。我想知道是否有辦法在 formArray 的每次迭代中獨立使用該事件
組件.ts
alicuotaForm: FormGroup;
value = this.fb.group({
manzana: ['', Validators.required],
villa: ['', Validators.required],
});
nregistros: number;
ngOnInit() {
this.alicuotaForm = this.fb.group({
times: this.fb.array([]),
});
}
//event onchange
getVillas(value) {
console.log('valor: ', value.value);
this.filtro = this.villas.filter((x) => x.manzana == value.value);
}
addGroup() {
const val = this.fb.group({
manzana: ['', Validators.required],
villa: ['', Validators.required],
});
const alicuotaForm = this.alicuotaForm.get('times') as FormArray;
alicuotaForm.push(val);
this.nregistros = alicuotaForm.length;
}
removeGroup(index) {
const alicuotaForm = this.alicuotaForm.get('times') as FormArray;
alicuotaForm.removeAt(index);
}
trackByFn(index: any, item: any) {
return index;
}
組件.html
<div class="container">
<div class="row">
<div class="col-col-6">
<label class="transparente"></label>
<button (click)="addGroup()" type="button" class="btn btn-success">
Agregar Campos
</button>
</div>
<br />
<form [formGroup]="alicuotaForm">
<ng-container
formArrayName="times"
*ngFor="
let time of alicuotaForm.controls.times?.value;
let i = index;
trackBy: trackByFn
"
>
<ng-container [formGroupName]="i" style="margin-bottom: 10px;">
Iteracion {{ i 1 }}
<div class="col-col-6">
<label>Manzana</label>
<select
formControlName="manzana"
class="form-control custom-select"
(change)="getVillas($event.target)"
>
>
<option *ngFor="let ur of manzanas">
{{ ur.manzana }}
</option>
</select>
</div>
<br />
<div class="col-sm">
<label>Villa</label>
<select formControlName="villa" class="form-control custom-select">
<option *ngFor="let ur of filtro" value="{{ ur.villa }}">
{{ ur.villa }}
</option>
</select>
</div>
<br />
------------------------------------------------------------------------<br /> </ng-container
></ng-container>
</form>
</div>
</div>
我不知道我能做什么，或者你會推薦我什么來解決我的問題，非常感謝
stackblitz 中的代碼 Stackblitz
uj5u.com熱心網友回復：
您必須為 filtro 創建單獨的值，您可以從以下代碼中獲得幫助
HTML
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<div >
<div >
<div >
<label ></label>
<button (click)="addGroup()" type="button" >
Agregar Campos filtro
</button>
</div>
<br />
<form [formGroup]="alicuotaForm">
<ng-container
formArrayName="times"
*ngFor="
let time of alicuotaForm.controls.times?.value;
let i = index;
trackBy: trackByFn
"
>
<ng-container [formGroupName]="i" style="margin-bottom: 10px;">
Iteracion {{ i 1 }}
<div >
<label>Manzana</label>
<select
formControlName="manzana"
(change)="getVillas($event.target, i)"
>
>
<option *ngFor="let ur of manzanas">
{{ ur.manzana }}
</option>
</select>
</div>
<br />
<div >
<label>Villa</label>
<select formControlName="villa" >
<option *ngFor="let ur of filtro[i]" value="{{ ur.villa }}">
{{ ur.villa }}
</option>
</select>
</div>
<br />
------------------------------------------------------------------------<br /> </ng-container
></ng-container>
</form>
打字稿
import { Component, VERSION } from '@angular/core';
import {
FormControl,
FormGroup,
FormBuilder,
FormArray,
Validators,
FormGroupDirective,
} from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' VERSION.major;
villas = [
{ manzana: '1', villa: '10' },
{ manzana: '1', villa: '20' },
{ manzana: '1', villa: '30' },
{ manzana: '2', villa: '40' },
{ manzana: '2', villa: '50' },
{ manzana: '2', villa: '60' },
{ manzana: '3', villa: '70' },
{ manzana: '3', villa: '80' },
{ manzana: '3', villa: '90' },
];
filtro: any[]=[];
manzanas = [{ manzana: '1' }, { manzana: '2' }, { manzana: '3' }];
alicuotaForm: FormGroup;
value = this.fb.group({
manzana: ['', Validators.required],
villa: ['', Validators.required],
});
nregistros: number;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.alicuotaForm = this.fb.group({
times: this.fb.array([]),
});
}
getVillas(value,index) {
console.log('valor: ', value.value);
this.filtro[index] = this.filtro[index].filter(x => x.manzana === value.value);
}
addGroup() {
const val = this.fb.group({
manzana: ['', Validators.required],
villa: ['', Validators.required],
});
const alicuotaForm = this.alicuotaForm.get('times') as FormArray;
alicuotaForm.push(val);
this.nregistros = alicuotaForm.length;
this.filtro.push(null);
this.filtro[this.nregistros-1]=[...this.villas];
}
removeGroup(index) {
const alicuotaForm = this.alicuotaForm.get('times') as FormArray;
alicuotaForm.removeAt(index);
}
trackByFn(index: any, item: any) {
return index;
}
}
uj5u.com熱心網友回復：
據我所知，您的主要問題是您有一個變數 ，filtro您試圖將其用于 FormArray 中的所有元素。您可以：
- （我的推薦）創建一個自定義
Pure管道以回傳過濾后的別墅串列。純管道只會在值更改時執行，而不是每個繪制周期。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'arrayFilter' })
export class ArrayFilterPipe implements PipeTransform {
transform(arr: any[], property: string, value: any): any {
return arr.filter((x) => x[property] === value);
}
}
然后你可以像這樣在你的模板中使用它（不要忘記在你的模塊中宣告它）：
<select formControlName="villa" class="form-control custom-select">
<option
*ngFor="let ur of (villas | arrayFilter: 'manzana': time.manzana)"
value="{{ ur.villa }}"
>
{{ ur.villa }}
</option>
</select>
打字稿：
addGroup() {
// either provide a '' option to this.manzanas, or set manzana: '1' to avoid expression after checked errors
const val = this.fb.group({
manzana: ['1', Validators.required],
villa: ['', Validators.required],
});
const alicuotaForm = this.alicuotaForm.get('times') as FormArray;
alicuotaForm.push(val);
this.nregistros = alicuotaForm.length;
}
有關更多資訊，請參閱管道。
- 在名為 的組上創建另一個表單控制元件
filtro，并在getVillas函式中設定其值。然后，當您*ngFor為表單控制元件執行操作時，您將參考此表單控制元件的值villa - 在您的組件中創建一個基于陣列項的 manzana 過濾別墅的函式（不推薦，因為這會重新計算每個繪制周期）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/377273.html
標籤：javascript 有角的 打字稿 角反应形式 表格阵列
上一篇：排除無法洗掉打字稿上的未定義
下一篇：輸入useReducer的狀態