I have a nested JSON response coming back from an API and is structured differently then how I need to display it on the template, for example:
@Component({
selector: 'reactive-form-example',
styles: ['./reactive-form-example.component.css'],
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formGroupName="first">
<input type="text" placeholder="some id" formControlName="someId">
<div formGroupName="second">
<input type="text" placeholder="some text" formControlName="someText">
</div>
</div>
</form>
`
})
export class ReactiveFormExampleComponent {
form = new FormGroup({
first: new FormGroup({
someId: new FormControl('587824')
}),
second: new FormGroup({
someText: new FormControl('the sky is blue')
})
});
onSubmit(value) {
console.log('Submit', this.form.value);
}
}
Question: Is it possible to have a formGroupName
nested within another formGroupName
, or is there a better way to achieve this same result using reactive forms?
[formGroup]="form.get('first')"
instead offormGroupName="first"
– shehata