Reputation: 135
I am not able to access formarray value on Using Reactive form in my Angular Project
my response is coming like this :
{appearsOnce: "InitialValue" formArray: Array[0]}
after typing value in the form Array and submitting form still I am getting array as 0
I am sharing my code which exists in slack-blitz link https://stackblitz.com/edit/angular-x6mwfj?file=src%2Fapp%2Fapp.component.ts
CODE :
TS :
inputArray: any = [];
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
let newForm = this.fb.group({
appearsOnce: ['InitialValue', [Validators.required, Validators.maxLength(25)]],
formArray: this.fb.array([])
});
const arrayControl = <FormArray>newForm.controls['formArray'];
this.inputArray.forEach(item => {
let newGroup = this.fb.group({
propertyOne: [''],
propertyTwo: ['']
});
arrayControl.push(newGroup);
});
this.myForm = newForm;
}
addInput(): void {
const arrayControl = <FormArray>this.myForm.controls['formArray'];
let newGroup = this.fb.group({
propertyOne: ['InitialValue'],
propertyTwo: ['InitialValue']
});
arrayControl.push(newGroup);
}
delInput(index: number): void {
const arrayControl = <FormArray>this.myForm.controls['formArray'];
arrayControl.removeAt(index);
}
onSubmit(): void {
console.log(this.myForm.value);
}
html :
<form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
<label>Appears Once:</label>
<input type="text" formControlName="appearsOnce" />
<div formArrayName="formArray">
<div *ngFor="let control of myForm.controls['formArray'].controls; let i = index">
<button type="button" (click)="delInput(i)">Delete</button>
<!-- <my-form-sub-component [myForm]="myForm.controls.formArray.controls[i]"></my-form-sub-component> -->
<div [formGroup]="newGroup">
<label>Property One: </label>
<input type="text" formControlName="propertyOne"/>
<label >Property Two: </label>
<input type="number" formControlName="propertyTwo"/>
</div>
</div>
</div>
<button type="button" (click)="addInput()">Add + </button>
<button type="submit" class='btn' [disabled]="!myForm.valid">Submit</button>
</form>
Upvotes: 0
Views: 1144
Reputation: 27491
FormArray are index based.So you have to pass index to formGroupName directive like this
component.html
<form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
<label>Appears Once:</label>
<input type="text" formControlName="appearsOnce" />
<div formArrayName="formArray">
<div *ngFor="let control of myForm.get('formArray').controls; let i = index">
<button type="button" (click)="delInput(i)">Delete</button>
<div [formGroupName]="i">
<label>Property One: </label>
<input type="text" formControlName="propertyOne"/>
<label >Property Two: </label>
<input type="number" formControlName="propertyTwo"/>
</div>
</div>
</div>
<button type="button" (click)="addInput()">Add + </button>
<button type="submit" class='btn' [disabled]="!myForm.valid">Submit</button>
</form>
Upvotes: 1