typescript 使用Angular 6设置输入字段的值

wf82jlnq  于 2023-02-17  发布在  TypeScript
关注(0)|答案(4)|浏览(149)

我在使用Angular 设置输入元素的值时遇到了一些麻烦。
我尝试通过以下方法设置应用程序中动态创建的input元素的值:

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 元素的值。我希望有人能帮助我解决这个问题。

myss37ts

myss37ts1#

您应该使用以下命令:

<td><input id="priceInput-{{orderLine.id}}" type="number" [(ngModel)]="orderLine.price"></td>

您需要将FormsModule添加到imports部分中的app.module,如下所示:

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访问输入))。

qxsslcnc

qxsslcnc2#

作为替代方法,您可以使用reactive forms。以下是一个示例: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() {

  }
}
monwx1rj

monwx1rj3#

你可以用三种方法。它们是,

1)使用ngModel

<input placeholder="Search..." autocomplete="off" [(ngModel)]="customSearch"/>

customSearch: string;
this.customSearch: string = "";

2)使用表单控件名

<form [formGroup]="searchForm">
<input placeholder="Search..." autocomplete="off" formControlName="customSearch"/></form>

this.searchForm = this._fb.group({
  'customSearch': ['']
 });

this.searchForm.controls['customSearch'].setValue('');
let val = this.searchForm.value.customSearch;

3)使用元素引用

<input placeholder="Search..." autocomplete="off" #customSearch />

@ViewChild('customSearch', { static: true }) customSearchElement: ElementRef;
this.customSearchElement.nativeElement.value = "";
ylamdve6

ylamdve64#

let test : any = document.getElementById("test") as HTMLInputElement | null
test.value = spaceNotes

这是另一种方法。

相关问题