时间戳

首页 > 解决方案 > 从角度的反应形式中获取预先填充的数据

javascript - 从角度的反应形式中获取预先填充的数据

问题描述

我试图从反应表单中获取数据，这里的数据预先填充在 html 中，如下所示：-

        <form [formGroup]="editForm"  (ngSubmit)="saveHandler()">
          <div *ngFor = "let dataItem of dataItems">
            <input type="text" value="{{dataItem.id}}" formControlName="id" placeholder="id">
            <strong>Name: </strong>
             <input type="text" value="{{dataItem.employee_name}}" formControlName="employee_name" placeholder="name">
            <strong>Salary :</strong>
            <input type="text" value="{{dataItem.employee_salary}}" formControlName="employee_salary" placeholder="salary">
            <strong>Age :</strong>
            <input type="text" value="{{dataItem.employee_age}}" formControlName="employee_age" placeholder="age">
            <button type="submit">Submit</button>
          </div>
        </form>

在此代码片段中，dataItem是来自具有以下字段的组件的 JSON 数组，现在我想将此表单的数据传递回组件，我无法直接使用场景之外的组件中的值。这是数据项：

this.dataItems   = [{
      "id":"1",
      "employee_name":"bappi gillu",
      "employee_salary":"2147483647",
      "employee_age":"9876443"
      }];

对于反应形式，这是组件文件中的代码：

this.editForm = new FormGroup({
      id : new FormControl(null),
      employee_name : new FormControl(null), 
      employee_salary : new FormControl(null),
      employee_age : new FormControl(null),
    });

这是 ngSubmit 的saveHandler()：

public saveHandler(  ){
  const employee = this.editForm.value  ;
  console.log(employee );
}

我得到 null 如果表单具有 css 类ng-untouched尽管如果 css 类是ng-touched，则该值将完美呈现。现在我想要的是提交数据而不考虑班级。这里也是stackblitz的链接

注意：dataItem 的值来自我这样说的这个问题的 api。

标签： javascriptangularangular-reactive-forms

解决方案

由于dataItems是一个数组，您可以使用formArray

试试这样：

工作演示

.html

<form [formGroup]="editForm" (ngSubmit)="saveHandler()">
    <div formArrayName="dataItems" *ngFor="let emp of editForm.get('dataItems').controls; let i = index">
        <div [formGroupName]="i">
            <hr *ngIf="i>0">
            <input type="text"  formControlName="id" placeholder="id">
            <strong>Name: </strong>
            <input type="text"  formControlName="employee_name" placeholder="name">
            <strong>Salary :</strong>
            <input type="text"  formControlName="employee_salary" placeholder="salary">
            <strong>Age :</strong>
            <input type="text" formControlName="employee_age" placeholder="age">
            <button type="submit">Submit</button>
        </div>
    </div>
</form>

.ts

    this.dataItems = [
      {
        id: "1",
        employee_name: "bappi gillu",
        employee_salary: "2147483647",
        employee_age: "9876443"
      }
    ];
    this.editForm = new FormGroup({
      dataItems: this.fb.array([])
    });
    this.editForm.setControl( "dataItems", this.setExistingDataitems(this.dataItems) );
  }

  setExistingDataitems(Dataitemsets): FormArray {
    const formArray = new FormArray([]);
    Dataitemsets.forEach(s => {
      formArray.push(
        this.fb.group({
          id: s.id,
          employee_name: s.employee_name,
          employee_salary: s.employee_salary,
          employee_age: s.employee_age
        })
      );
    });

    return formArray;
  }

推荐阅读