Observables with nested reactive form Angular 5
Observables with nested reactive form Angular 5
I have reactive form like this:
<form *ngIf="people$ | async;" [formGroup]="applicationForm" (ngSubmit)="submitForm()">
<person-form
[parentForm]="applicationForm"
(added)="addPerson()"
(removed)="removePerson($event)">
</person-form>
<button type="submit">Submit</button>
</form>
And an appropriate class
export class FormComponent implements OnInit {
applicationForm: FormGroup;
people$: Observable<any>;
constructor( public peopleService: PeopleService ) {}
ngOnInit() {
this.applicationForm = this.fb.group({});
this.people$ = this.peopleService.getPeopleData().pipe(
tap(peopleData => {
this.applicationForm.setControl('people', this.fb.array(peopleData || ));
})
);
}
}
Im my ngOnInit I'm getting data from service which gives me array of people and pushing to applicationForm as form Controls. The problem occurs when I pass that applicationForm to nested form in array:
Here is the template of nested form:
And a class of nested form I also emit some adding and removing array elements, I omit this to make code shorter Did I miss something? Why it cannot find 'people -> 0 -> age'? You didn't declare "age" in your formControl
</div>
</div>
</div>export class BorrowerFormComponent {
@Input() parentForm: FormGroup;
@Output() added: EventEmitter<any> = new EventEmitter<any>();
@Output() removed: EventEmitter<any> = new EventEmitter<any>();
onAdd() {
this.added.emit();
}
onRemove(index) {
this.removed.emit(index);
}
get people() {
return (this.parentForm.get('people') as FormArray).controls;
}
}
So Ii shows me control after long period of time but also I have error:Cannot find control with path: 'people -> 0 -> age'
This 'age' field is returned from service.
1 Answer
1
ngOnInit(){
initGroup() {
let rows = this.parentForm.get('people') as FormArray;
rows.push(this.fb.group({
age: [null, Validators.required],
}))
}
}
@Luchnik. Please check again
– Joseph
Jul 3 at 7:24
It doesn't work. When I do let rows = this.parentForm.get('people') as FormArray; It gives me array of FormControls with appropriate data from service (including age). But when pushing new formGroup - the resulted array looks like this: [FormControl, FormControl, FormGroup] which is not what we need
– Luchnik
Jul 3 at 7:33
Can you replicate this in stackblitz?
– Joseph
Jul 3 at 7:37
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Where this should be added? In parent form ngOnInit? I did like this in parent component and still have same error: this.applicationForm = this.fb.group({ people: this.fb.array([ this.fb.group({ age: null, }) ]) });
– Luchnik
Jul 3 at 7:02