启用以正确绑定 Angular formArray 数据
Enable to bind Angular formArray data properly
我想在 FormGroup
中创建 formArray
。 formArray
有多个 formGroup
并创建了 FormGroup
但我可以在 html 中绑定数据,如果我在输入标签中写一些东西,它是 0 索引但数据反映最后 FormGroup
.
HTML:
<form [formGroup]="form">
<table>
<thead>
<tr>
<th>City</th>
<th>Employee id</th>
</tr>
</thead>
<tbody formArrayName="myNewArray">
<tr *ngFor="let controls of form.get('myNewArray').controls; let i = index">
<div [formGroupName]="i">
<td>
<mat-form-field>
<input matInput class="size-input" formControlName="first">
</mat-form-field>
</td>
<td>
<mat-form-field>
<input matInput class="size-input" formControlName="second">
</mat-form-field>
</td>
</div>
</tr>
</tbody>
<pre>{{form.value | json}}</pre>
</table>
</form>
TS:
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
myNewArray: this.fb.array([])
});
}
ngOnInit(): void {
const formGroup = { };
let abc = ['first', 'second'];
abc.forEach(formControl => {
formGroup[formControl] = new FormControl("", Validators.required);
});
for (let value in abc) {
let formGroupArray = <FormArray>this.form.controls.myNewArray;
formGroupArray.push(this.setUsersFormArray(formGroup));
}
}
private setUsersFormArray (formGroup) {
return this.fb.group(formGroup)
}
}
同时检查 link:- https://stackblitz.com/edit/angular-ptbvgd?file=src/app/app.component.html
我对 ts 做了一些改动。希望对您有所帮助:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
myNewArray: this.fb.array([])
});
}
ngOnInit(): void {
const formGroup = { };
let abc = ['bonus', 'contributionretirement'];
abc.forEach(formControl => {
formGroup[formControl] = new FormControl("", Validators.required);
});
console.log(formGroup);
for (let value in abc) {
let formGroupArray = this.myNewArray;
formGroupArray.push(this.setUsersFormArray());
}
console.log(this.form.controls.myNewArray);
for (let controls of this.myNewArray.controls) {
console.log(controls,'tttt');
}
}
get myNewArray(): FormArray{
return this.form.get('myNewArray') as FormArray;
}
private setUsersFormArray ():FormGroup {
const formGroup = new FormGroup({});
let abc = ['bonus', 'contributionretirement'];
abc.forEach(formControl => {
formGroup.addControl(formControl, new FormControl("", Validators.required));
});
return formGroup;
}
}
我想在 FormGroup
中创建 formArray
。 formArray
有多个 formGroup
并创建了 FormGroup
但我可以在 html 中绑定数据,如果我在输入标签中写一些东西,它是 0 索引但数据反映最后 FormGroup
.
HTML:
<form [formGroup]="form">
<table>
<thead>
<tr>
<th>City</th>
<th>Employee id</th>
</tr>
</thead>
<tbody formArrayName="myNewArray">
<tr *ngFor="let controls of form.get('myNewArray').controls; let i = index">
<div [formGroupName]="i">
<td>
<mat-form-field>
<input matInput class="size-input" formControlName="first">
</mat-form-field>
</td>
<td>
<mat-form-field>
<input matInput class="size-input" formControlName="second">
</mat-form-field>
</td>
</div>
</tr>
</tbody>
<pre>{{form.value | json}}</pre>
</table>
</form>
TS:
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
myNewArray: this.fb.array([])
});
}
ngOnInit(): void {
const formGroup = { };
let abc = ['first', 'second'];
abc.forEach(formControl => {
formGroup[formControl] = new FormControl("", Validators.required);
});
for (let value in abc) {
let formGroupArray = <FormArray>this.form.controls.myNewArray;
formGroupArray.push(this.setUsersFormArray(formGroup));
}
}
private setUsersFormArray (formGroup) {
return this.fb.group(formGroup)
}
}
同时检查 link:- https://stackblitz.com/edit/angular-ptbvgd?file=src/app/app.component.html
我对 ts 做了一些改动。希望对您有所帮助:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
myNewArray: this.fb.array([])
});
}
ngOnInit(): void {
const formGroup = { };
let abc = ['bonus', 'contributionretirement'];
abc.forEach(formControl => {
formGroup[formControl] = new FormControl("", Validators.required);
});
console.log(formGroup);
for (let value in abc) {
let formGroupArray = this.myNewArray;
formGroupArray.push(this.setUsersFormArray());
}
console.log(this.form.controls.myNewArray);
for (let controls of this.myNewArray.controls) {
console.log(controls,'tttt');
}
}
get myNewArray(): FormArray{
return this.form.get('myNewArray') as FormArray;
}
private setUsersFormArray ():FormGroup {
const formGroup = new FormGroup({});
let abc = ['bonus', 'contributionretirement'];
abc.forEach(formControl => {
formGroup.addControl(formControl, new FormControl("", Validators.required));
});
return formGroup;
}
}