[英]Setting values of input fields with Angular 6
我在使用Angular設置輸入元素的值時遇到了一些麻煩。
我試圖通過此方法在我的應用程序中設置動態創建的輸入元素的值:
copyPricingToAll(): void {
var copyValue: string = document.getElementById("priceInputGlobal").value;
this.currentItem.orderLines.forEach(orderLine => {
document.getElementById("priceInput-" + orderLine.id).setAttribute("value", copyValue);
});
}
我正在創建這樣的行:
<ng-container *ngFor="let orderLine of currentItem.orderLines let i=index">
<tr>
<td>{{getCorrectTimeString(orderLine)}}</td>
<td>{{orderLine.quantity}}</td>
<td><input id="priceInput-{{orderLine.id}}" type="number" value="{{orderLine.price}}"></td>
</tr>
</ng-container>
不幸的是.value不被認為是有效的操作。 我不確定如何在angular中正確設置動態創建元素的值。 我希望有人能夠幫助我解決這個問題。
您應該使用以下內容:
<td><input id="priceInput-{{orderLine.id}}" type="number" [(ngModel)]="orderLine.price"></td>
您需要在inputs
部分app.module
添加到FormsModule
,如下所示:
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
...
],
imports: [
BrowserModule,
FormsModule
],
..
ngModel
周圍括號的使用如下:
[]
顯示它正在從您的TS文件中獲取輸入。 此輸入應為公共成員變量。 從TS到HTML的單向綁定。
()
表明它將HTML文件的輸出轉換為TS文件中的變量。 從HTML到TS的單向綁定。
[()]
都是(例如雙向綁定)
有關更多信息,請參見此處: https : //angular.io/guide/template-syntax
我還建議用這樣的東西替換id="priceInput-{{orderLine.id}}"
[id]="getElementId(orderLine)"
其中getElementId(orderLine)
返回TS文件中的元素Id,可以任意使用你需要引用元素(以避免簡單的錯誤,比如在一個地方調用priceInput1
在另一個地方調用priceInput-1
。(如果你還需要在其他地方通過它的Id訪問輸入)
作為替代,您可以使用反應形式 。 這是一個例子: https : //stackblitz.com/edit/angular-pqb2xx
模板
<form [formGroup]="mainForm" ng-submit="submitForm()">
Global Price: <input type="number" formControlName="globalPrice">
<button type="button" [disabled]="mainForm.get('globalPrice').value === null" (click)="applyPriceToAll()">Apply to all</button>
<table border formArrayName="orderLines">
<ng-container *ngFor="let orderLine of orderLines let i=index" [formGroupName]="i">
<tr>
<td>{{orderLine.time | date}}</td>
<td>{{orderLine.quantity}}</td>
<td><input formControlName="price" type="number"></td>
</tr>
</ng-container>
</table>
</form>
零件
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 6';
mainForm: FormGroup;
orderLines = [
{price: 10, time: new Date(), quantity: 2},
{price: 20, time: new Date(), quantity: 3},
{price: 30, time: new Date(), quantity: 3},
{price: 40, time: new Date(), quantity: 5}
]
constructor() {
this.mainForm = this.getForm();
}
getForm(): FormGroup {
return new FormGroup({
globalPrice: new FormControl(),
orderLines: new FormArray(this.orderLines.map(this.getFormGroupForLine))
})
}
getFormGroupForLine(orderLine: any): FormGroup {
return new FormGroup({
price: new FormControl(orderLine.price)
})
}
applyPriceToAll() {
const formLines = this.mainForm.get('orderLines') as FormArray;
const globalPrice = this.mainForm.get('globalPrice').value;
formLines.controls.forEach(control => control.get('price').setValue(globalPrice));
// optionally recheck value and validity without emit event.
}
submitForm() {
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.