[英]Get source FormControl from mat-autocomplete
I have a table of dynamic matInput objects like so:我有一个动态 matInput 对象表,如下所示:
<div formArrayName="salesItems">
<table class="app-sales-items-table">
<thead>
<th>Qty</th>
<th>Item #</th>
<th>Description</th>
<th>Weight</th>
<th>Serial No</th>
<th>Unit Price</th>
<th>Item Discount %</th>
<th>Line Total</th>
</thead>
<tbody>
<tr *ngFor="let item of salesItemsForm.get('salesItems').controls; let index=index" [formGroupName]="index">
<td>{{item.qty}}</td>
<td>
<mat-form-field class="field-full-width">
<input type="text" matInput formControlName="itemNumber" [matAutocomplete]="autoItemNumber">
</mat-form-field>
</td>
<td>
<mat-form-field class="field-full-width">
<input type="text" matInput formControlName="description" [matAutocomplete]="autoDescription">
</mat-form-field>
</td>
<td>{{item.weight}}</td>
<td>{{item.serialNumber}}</td>
<td>{{item.unitPrice}}</td>
<td>{{item.itemDiscount}}</td>
<td>{{item.lineTotal}}</td>
</tr>
</tbody>
</table>
</div>
Each matInput has a corresponding mat-autocomplete, for example:每个 matInput 都有一个对应的 mat-autocomplete,例如:
<mat-autocomplete #autoDescription="matAutocomplete" (optionSelected)="setSelectedSalesItem($event.option.value, $event.source)">
<mat-option *ngFor="let option of (filteredSalesItems )" [value]="option">{{option.description}}
</mat-option>
</mat-autocomplete>
As you can see, in the optionSelected method, I'm passing in $event.source.如您所见,在 optionSelected 方法中,我传入了 $event.source。 My real goal is to get the FormControl that triggered the event, so I can do things like set the other values in the same row.我的真正目标是获取触发事件的 FormControl,这样我就可以在同一行中设置其他值。 The issue is $event.source is of type MatAutoComplete, and I'm not sure how to get the (reactive) FormControl from that.问题是 $event.source 是 MatAutoComplete 类型,我不确定如何从中获取(反应性)FormControl。
Edit:编辑:
stackblitz here: https://stackblitz.com/edit/angular-mzryga?file=src%2Fapp%2Fapp.component.ts堆栈闪电: https://stackblitz.com/edit/angular-mzryga?file=src%2Fapp%2Fapp.component.ts
You can add another parameter to the function call.您可以向 function 调用添加另一个参数。 You already have the formControlName
, you can pass the formControlName [itemNumber/description]
and use it to get the formControl
.您已经有了formControlName
,您可以传递formControlName [itemNumber/description]
并使用它来获取formControl
。
I think I got it.我想我明白了。 I moved the inside the ngFor.我移动了 ngFor 的内部。 Siince my ngFor looks like this:因为我的 ngFor 看起来像这样:
<tr *ngFor="let item of salesItemsForm.get('salesItems').controls; let index=index" [formGroupName]="index">
i can pass in item
and it's gravy from there.我可以传入item
,它是从那里开始的肉汁。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.