Question

我尝试在文本框中渲染cat_name，但我没有得到。下面是我渲染数据的代码

constructor(private fb: FormBuilder) { 

this.myForm = this.fb.group({
users: this.fb.array([])
})

let dataArr = new FormArray([]);
dataArr.push(new FormGroup({
'cat_name': new FormControl(this.users[0].data[0].cat_name),
'category': new FormControl(this.users[0].data[0].category)
}));

let formArr = <FormArray>this.myForm.controls.users;
formArr.push(fb.group({
firstname: this.users[0].firstname,
lastname: this.users[0].lastname,
street: this.users[0].street,
data: dataArr
}));
}

<fieldset formGroupName="data">
cat_name:<input type="text" formControlName="cat_name">
</fieldset>

firstname和lastname在文本框中成功呈现但是“data-sub array”具有cat_name，我试图渲染但我没有得到下面是我的代码网址 Code URL

我已附加屏幕截图我无法在文本框Image中呈现cat_name字段以下是我的完整HTML代码

<form [formGroup]="myForm" (ngSubmit)="onMy(myForm.value)">  
<ng-container formArrayName="users">
<div *ngFor="let user of myForm.controls.users.controls; let i=index" [formGroupName]="i">

<select (change)="selectarch($event)">
<option>Select</option>
<option [value]="res.firstname" *ngFor="let res of users">{{res.firstname}}</option>
</select>   
<br><br>

First name:<input type="text" formControlName="firstname">
<br>
Last name:<input type="text" formControlName="lastname">
<br>
Last name:<input type="text" formControlName="street">
<br><br>

<select (change)="selectcolumn($event)">
<option>Select</option>
<option [value]="col.cat_name" *ngFor="let col of test[0].data">{{col.cat_name}}</option>
</select>    
<br><br>
<fieldset formGroupName="data">
cat_name:<input type="text" formControlName="cat_name">
</fieldset>

</div>
</ng-container>
<button type="submit">Add</button>
</form>

Answer 1

ReactiveForm是非常有益的，但很难开始，一个可能更容易实现的替代选项是模板驱动形式方法。

那就是说，你在这里遇到的问题是，你是在尝试在formArray中访问第二个formArray，而不是声明这一点。

您已宣布formArrayName="users"，并使用let user of myForm.controls.users.controls对其进行了迭代（注意，这相当于let userCtrl of myForm.get('users').controls），但您还需要通过用户进行迭代。 data.controls

您需要为FormArray的每个级别声明一个formArrayName

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">

<div formArrayName="users">
  <div *ngFor="let userCtrl of myForm.get('users').controls; let j = index;"
       [formGroupName]="j" >
    <div formArrayName="data">
      <fieldset *ngFor="let dataCtrl of userCtrl.get('data').controls; let i = index;"
                [formGroupName]="i">
        cat_name:<input type="text"  formControlName="cat_name">
      </fieldset>
    </div>

  </div>
</div>
</form>

Answer 2

data是一个formArray而不是formGroupName。你应该遍历数据formarray

  <fieldset formArrayName="data">
    <div *ngFor="let d of user.controls.data.controls; let ik=index" [formGroupName]="ik">
    cat_name:<input type="text" formControlName="cat_name">
    </div>
    </fieldset>

working example

错误：找不到路径控件：'users - ＆gt; 0 - ＆gt;数据 - ＆gt; cat_name

2 个答案: