是否可以通过索引将变量分配给模板?当前,如果我输入一个项目,则描述和度量单位(UM)将放置在正确的位置(在后面的详细说明中),但是如果我添加另一个项目,则描述和UM将在两个位置重复。我知道这种情况的发生是因为它们具有相同的变量名,但是我不确定是否有处理此问题的好方法。我当时在想验证器之类的东西,但不确定如何工作。
我有一个反应式表单页面,我正在从多组件形式切换到单组件形式。我知道我可以使用两个组件来实现这一目标,但是在使用多组件方法提交表单后,我在重置异步数据时遇到了问题。
我有一个FormArray
,其中有一个返回FormGroup
的函数:
this.myForm = this.fb.group({
...
requisitionItems: this.fb.array([this.initItems()])
});
initItems(): FormGroup {
return this.fb.group({
item: ['', Validators.required],
quantity: ['', Validators.required],
lot: [''],
reasonCode: ['', Validators.required],
operation: [{ value: '', disabled: true }]
});
}
我有一个接受item: string
并异步返回说明和度量单位的函数。描述显示在项目的输入字段下,度量单位显示在数量输入字段旁边:
enterItem(item: string) : void {
if (item) {
this.itemServ.getItemDescription(item).subscribe(
res => {
this.itemDesc = res.toString();
},
err => {
this.itemDesc = 'Could not find this item';
}
);
this.itemServ.getUnitOfMeasure(item).subscribe(res => {
this.unitOfMeasure = res.toString();
});
}
在我的模板中,我将FormArray
填充为带有索引的*ngFor
和[formGroupName]="i"
。 (为简洁起见,删除了多余的div和样式)
<div formArrayName="requisitionItems" *ngFor="let item of requisitionItems.controls; let i = index" class="well" style="border: 1px solid black; border-radius: 10px; margin-top: 10px;" style="padding-bottom: 3px">
<div [formGroupName]="i">
<label attr.for="{{'item' + i}}">Matric Part #</label>
<input type="text" formControlName="item" id="{{'item' + i}}" (keyup.enter)="enterItem(item.value.item)" (blur)="enterItem(item.value.item)">
<span attr.for="{{'item' + i}}" class="smallspan" [ngStyle]="{'color':this.itemDesc === 'Could not find this item' ? 'red' : 'black' }">{{this.itemDesc}}</span>
<label attr.for="{{'quantity' + i}}">Quantity</label>
<input type="number" formControlName="quantity" id="{{'quantity' + i}}" min="0">
<span> {{this.unitOfMeasure}}</span>
<label attr.for="{{'reasonCode' + i}}">Reason Code</label>
<select formControlName="reasonCode" id="{{'reasonCode' + i}}" placeholder="Reason Code" style="max-width: 100% !important" no-padding>
<option value="" disabled>Please select a reason code</option>
<option *ngFor="let reasonCode of this.reasonCodes">
{{reasonCode}}
</option>
</select>
<label attr.for="{{'operation' + i}}">Operation</label>
<select formControlName="operation" id="{{'operation' + i}}" placeholder="Operation" style="max-width: 100% !important" no-padding>
<option value="" disabled>Please select an operation</option>
<option *ngFor="let op of operList">
{{op.operString}}
</option>
</select>
<label>Action</label>
<button class="btn btn-primary btn-lg" type="button" (click)="removeItem(index)">Remove</button>
</div>
</div>