Question

我试图从反应形式获取数据，此处的数据像这样预先填充在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数组，现在我想将此表单的数据传递回组件，我无法直接使用我的方案中没有的组件。这是dataItem：

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 );
}

我得到的是空值如果表单具有css类 ng-touched ，尽管css类是 ng-touched ，则该值非常合适。现在我想要的是无论班级如何提交数据。这也是stackblitz

的链接

注意：针对这个问题，dataItem的值来自一个api。

Answer 1

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

尝试这样：

Working Demo

.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;
  }

Answer 2

您可以采用反应形式直接设置默认值，例如：

  this.editForm = new FormGroup({
      id : new FormControl(1),
      employee_name : new FormControl("bappi gillu"), 
      employee_salary : new FormControl("2147483647"),
      employee_age : new FormControl("9876443"),
    });

现在，当您提交表单时，所有字段值都将出现在表单对象中

或者您可以使用setValue方法来更新反应形式

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

this.updateValues(this.dataItems[0]);

updateValues({id, employee_name, employee_salary, employee_age}: any) {
  this.editForm.setValue({
      id : id, 
      employee_name: employee_name,
      employee_salary : employee_salary,
      employee_age : employee_age
  });
}

从反应形式获取预先填充的数据

2 个答案: