如何在 formArray 中垫输入的占位符中设置不同的文本？

Question

我的 mat-table 中有一个 formArray，其中显示了三行。现在我想在列名的每一行中使用不同的占位符文本，例如 test1、test2、test3。实现这个的最佳方法是什么？

我的代码：

<div formArrayName="rows" *ngIf="attributesWithFormControls.includes(column.attribute); else otherColumns">
                  <span id="edit-cell" [formGroupName]="i">
                      <mat-form-field id="edit-calc-input">
                        <label>
                          <input matInput type="text" [formControlName]="column.attribute">
                        </label>
                      </mat-form-field>
                  </span>
                </div>

  // To use input fields in template
  public attributesWithFormControls = [
    "productNumber",
    "name",
    "weight",
    "amount"
  ];

ngOnInit() {
    this.columns = this.displayedColumns.map(c => c.attribute);

    if (this.dataSource === null) {
      this.dataSource = new MatTableDataSource([]);
    }

    // myForm
    this.myForm = this.formBuilder.group({
      rows: this.formBuilder.array([this.initItemRows()])
    });
  }

// Convenience getter for easy access to form fields
  get f() {
    return this.myForm.controls;
  }

  get formArr() {
    return this.myForm.get("rows") as FormArray;
  }

  initItemRows() {
    return this.formBuilder.group({
      productNumber: [""],
      name: [""],
      weight: [""],
      amount: [""]
    });
  }

这是我在 StackBlitz

中的作品

Answer 1

使用表单控制修改

如果您想从您的 formGroup 执行此操作，您可以通过以下方式完成此操作。

创建一个辅助函数 return 基于 index

的占位符文本

// return row placeholder
 getPlaceholder(i) {
   switch (i) {
     case 0:
       return "test";
       break;
     default:
       return "test" + i;
       break;
   }
 }

在您的 addRow 函数中获取占位符文本并将其设置为 newItem.value 对象

中的属性 placeholder

 addRow() {
   for (let i = 0; i < 3; i++) {
     const newItem = this.initItemRows();
     newItem.value["placeholder"] = this.getPlaceholder(i);
     this.formArr.push(newItem);
     this.dataSource.data = this.dataSource.data.concat(newItem.value);
   }
 }

在您的 HTML 标记中访问 row

中的属性值

<input
    matInput
    type="text"
    [placeholder]="row.placeholder"
    [formControlName]="column.attribute"
 />

STACKBLITZ

https://stackblitz.com/edit/angular-l9x7ac-oxq4qq?file=app/table-basic-example.html

修订非形式控制

创建一个辅助函数 return 基于 index

的占位符文本

 // return row placeholder
  getPlaceholder(i) {
    switch (i) {
      case 0:
        return "test";
        break;
      default:
        return "test" + i;
        break;
    }
  }

在 HTML 标记中，通过 placeholder 属性调用辅助函数并将 i 作为参数传递。

<input
    matInput
    type="text"
    [placeholder]="getPlaceholder(i)"
    [formControlName]="column.attribute"
/>

STACKBLITZ

https://stackblitz.com/edit/angular-l9x7ac-6aq6u6?file=app%2Ftable-basic-example.html

原始答案

修改您的界面以包含 placeholder 属性.

// Interface
export interface MyInterface {
  attribute: string;
  name: string;
  placeholder: string;
}

将带有占位符值的属性添加到您的列属性数组。

public displayedColumns: MyInterface[] = [
    { attribute: "productNumber", name: "ProductID", placeholder: "test1" },
    { attribute: "name", name: "Name", placeholder: "test2" },
    { attribute: "weight", name: "Weight", placeholder: "test3" },
    { attribute: "amount", name: "Price", placeholder: "test4" }
  ];

在 HTML 标记中，使用 matInput 上的 placeholder 属性并通过 [placeholder]="column.placeholder"

传递您的值

<input
    matInput
    type="text"
    [placeholder]="column.placeholder"
    [formControlName]="column.attribute"
 />

STACKBLITZ

https://stackblitz.com/edit/angular-l9x7ac-psmqzu?file=app/table-basic-example.html

如何在 formArray 中垫输入的占位符中设置不同的文本？

How to set different text in placeholder of my mat input in formArray?

typescript

angular

angular-reactive-forms

formarray