我已经处理了我的代码，因为我正在尝试使用 formControl 进行自动完成，但是当您选择某些内容到我的 formgroup 数组时，我需要将这些数据带入。我想知道是否存在一种方法可以让 formControl 过滤我的自动完成和 formControlName 来获取数据，谢谢，这是我的代码：
newArticle: FormControl = this.fb.control('', Validators.required);
registerForm: FormGroup = this.fb.group({
itemRows: this.fb.array([
this.fb.group({
article: [, Validators.required],
quantity: [, Validators.required],
price: [, Validators.required],
discount: [, Validators.required],
subtotal: [0, Validators.required],
warehouse: ['', Validators.required],
})
]),
tax: [, Validators.required],
date: [this.dateToday, Validators.required]
});
get rowsArr() {
return this.registerForm.get('itemRows') as FormArray;
}
ngOnInit(): void {
this.filteredOptionsArticle = this.newArticle.valueChanges
.pipe(
startWith(''),
map(value => typeof value === 'string' ? value : value.descripcion),
map(descripcion => descripcion ? this._filterA(descripcion) : this.ArticleList.slice())
);
this.article.listArticles().subscribe((result) => {
this.ArticleList = result;
})
}
addNewRow() {
//if( this.registerForm.invalid ) { return; }
const newRow = this.fb.group({
article: [, Validators.required],
quantity: [, Validators.required],
price: [, Validators.required],
discount: [, Validators.required],
subtotal: [0, Validators.required],
warehouse: ["", Validators.required]
})
this.rowsArr.push(newRow);
}
deleteRow(rowIndex: number) {
const control = <FormArray>this.registerForm.controls['itemRows'];
if (control != null) {
this.totalRow = control.value.length;
}
if (this.totalRow > 1) {
control.removeAt(rowIndex);
} else {
alert('you need to write all')
}
}
private _filterA(name: string): IArticles[] { const filterValue = name.toLowerCase(); return this.ArticleList.filter(option => option.descripcion.toLowerCase().indexOf(filterValue) === 0); }
还有我的 HTML：
<h2 mat-dialog-tittle>New Quotation</h2>
<mat-dialog-content>
<form [formGroup]="registerForm">
<div class="row" style="justify-content: center;">
<div class="col-lg-3">
<mat-form-field>
<mat-label>Type customer</mat-label>
<ng-container formArrayName="itemRows">
<input type="text" matInput [matAutocomplete]="autoCustomer" [formControl]="newCustomer">
</ng-container>
<mat-autocomplete #autoCustomer="matAutocomplete" [displayWith]="displayFnCustomer">
<mat-option *ngFor="let customer of filteredOptionsCustomer | async" [value]="customer">
{{customer.doc_nit}} - {{customer.nombre}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div class="col-lg-3">
<mat-form-field>
<mat-label>Tax (%)</mat-label>
<input type="number" placeholder="0" matInput formControlName="tax" (keyup)="calculation()">
</mat-form-field>
</div>
<div class="col-lg-3">
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" formControlName="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
</div>
<table>
<tr>
<th>
<mat-label>Warehouse</mat-label>
</th>
<th>
<mat-label>Articles</mat-label>
</th>
<th>
<mat-label>Quantities</mat-label>
</th>
<th>
<mat-label>Prices</mat-label>
</th>
<th>
<mat-label>Discounts</mat-label>
</th>
<th>
<mat-label>Subtotals</mat-label>
</th>
<th colspan="2">
<mat-label>Options</mat-label>
</th>
</tr>
<ng-container formArrayName="itemRows" class="row">
<ng-container *ngFor="let itemrow of rowsArr.controls; let i=index" [formGroupName]="i">
<tr>
<td style="width: 160px;">
<select class="form-control" formControlName="warehouse">
<option selected value="">
Select warehouse
</option>
<option *ngFor="let warehouse of WarehouseList" [value]="warehouse.id_almacen">
{{warehouse.nombre}}
</option>
</select>
</td>
<td style="text-align: left; width: 300px;">
<input type="text" class="form-control" name="" placeholder="Type Article"
[matAutocomplete]="autoArticle" [formControl]="newArticle"> <----- Here I woud like to do it
<mat-autocomplete #autoArticle="matAutocomplete" [displayWith]="displayFnArticle">
<mat-option *ngFor="let articles of filteredOptionsArticle | async" [value]="articles">
{{articles.codigo}} - {{articles.descripcion}}
</mat-option>
</mat-autocomplete>
</td>
<td>
<input class="form-control" placeholder="0" type="text" (keyup)="calculation()"
formControlName="price">
</td>
<td>
<input class="form-control" placeholder="0" type="text" (keyup)="calculation()"
formControlName="discount" (keyup.enter)="addNewRow()">
</td>
<td>
<input class="form-control" placeholder="0" type="text" (keyup)="calculation()"
formControlName="quantity">
</td>
<td style="width:100px">
<div style="margin: 5px; text-align: center;">
{{itemrow.value.subtotal}}
</div>
</td>
<td>
<a (click)="deleteRow(i)">
<mat-icon>cancel</mat-icon>
</a>
</td>
<td>
<button mat-raised-button (click)="addNewRow">
+
</button><a (click)="addNewRow()">
<mat-icon>add_circle</mat-icon>
</a>
</td>
</tr>
<input type="text" formControlName="article" value="newArticle.value">
</ng-container>
</ng-container>
</table><br>
<button mat-raised-button (click)="register()">Register</button>
<mat-card-actions>
<button mat-raised-button mat-dialog-close>Close</button>
</mat-card-actions>
</form>
<pre>
{{registerForm.valid}}
{{registerForm.value | json}}
{{newArticle.value | json}}
{{newArticle.value.id_articulo}}
{{newCustomer.value | json}
}
</pre>