Seeking assistance with understanding the functionality of a control group. Attempting to implement something similar to this:
app.component.ts:
import { Component, OnInit } from "@angular/core";
import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from "@angular/common";
import { NestedFieldset } from "./nested.fieldset.component";
@Component({
selector: 'my-app',
directives: [
NestedFieldset
],
template: `
<form (ngSubmit)="onSubmit()" [ngFormModel]="form">
<nested-fieldset ngControlGroup="abFields" [parentForm]="form"></nested-fieldset>
<label>field c: </label>
<input placeholder="fieldC" ngControl="fieldC"/> <br>
<button (ngSubmit)="onSubmit()">fancy submit</button>
</form>
`})
export class AppComponent {
form: ControlGroup;
constructor(private fb: FormBuilder) {
this.form = fb.group({
abFields: NestedFieldset.getControlGroup(fb),
fieldC: ['']
});
}
onSubmit(){
console.log(" fancy was submitted")
console.log(this.form.value)
}
}
nested.fieldset.component.ts:
import { Component, Input } from "@angular/core";
import { TranslatePipe } from "ng2-translate/ng2-translate";
import { FormBuilder, ControlGroup, FORM_DIRECTIVES } from "@angular/common";
@Component({
selector: 'nested-fieldset',
directives: [
FORM_DIRECTIVES],
template: `
<fieldset [ngFormModel]="parentForm">
<label>field a: </label><input placeholder="fieldA"/> <br>
<label>field b: </label><input placeholder="fieldB"/> <br>
</fieldset>
`
})
export class NestedFieldset {
@Input()
parentForm: ControlGroup;
constructor() {}
static getControlGroup(fb: FormBuilder) {
return fb.group({
fieldA: [''],
fieldB: ['']
});
}
}
After submitting, fieldC is accessible, but having trouble accessing values from nested fieldset (fieldA and fieldB).
Any idea what could be causing this issue?
Take a look at the live example on plunker: http://plnkr.co/edit/EDqloxqd8xbByejEUZZx?p=preview