Upon inspection, I noticed that my father form component is displaying the values of nickName and name, but not the value of age. It seems that {{myFormFather.status}} does not recognize the component child. It's almost as if my child component is invisible - why is this happening?
Code from my-form-father.html:
<form [formGroup]="myFormFather" (ngSubmit)="onSubmit()">
<input formControlName="nickName">
<input formControlName="name">
<my-form-child
[age]="myFormFather">
</my-form-child>
<button type="submit"
[disabled]="myFormFather.invalid">Save
</button>
</form>
Code from my-form-father.ts:
myFormFather = new FormGroup({
nickName: new FormControl(),
name: new FormControl()
});
constructor(private fb:FormBuilder) {}
ngOnInit() {this.createForm()}
createForm() {
this.myFormFather = this.fb.group({
nickName: ['', [Validators.required],
name: ['', [Validators.required]
});
}
Code from my-form-child.html:
<div [formGroup]="ageForm">
<input formControlName="age">
</div>
Code from my-form-child.ts:
@Input() ageForm = new FormGroup({
age: new FormControl()
});
constructor(private fb:FormBuilder) {}
ngOnInit() {this.createForm()}
createForm() {
this.ageForm = this.fb.group({
age: ['', [Validators.required]]
});
}