Skip to content

Instantly share code, notes, and snippets.

@whisher
Last active July 19, 2019 19:43
Show Gist options
  • Save whisher/57d119d13a0ed25e17ba49f143a5fd84 to your computer and use it in GitHub Desktop.
Save whisher/57d119d13a0ed25e17ba49f143a5fd84 to your computer and use it in GitHub Desktop.
UPDATE
createForm() {
this.frm = this.fb.group({
delivery: this.delivery,
invoice: this.invoice
});
this.frm.get('invoice').disable();
}
show() {
this.hasShowed = !this.hasShowed;
if (this.hasShowed) {
this.frm.get('invoice').enable();
} else {
this.frm.get('invoice').disable();
}
}
export class ParentFormComponent implements OnInit {
frm: FormGroup;
delivery: FormGroup = this.fb.group({
name: '',
email: ''
});
invoice: FormGroup = this.fb.group({
name: '',
care: ''
});
hasShowed = false;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.createForm();
}
createForm() {
this.frm = this.fb.group({ delivery: this.delivery });
}
show() {
this.hasShowed = !this.hasShowed;
if (this.hasShowed) {
this.frm = this.fb.group({
delivery: this.delivery,
invoice: this.invoice
});
} else {
this.frm = this.fb.group({ delivery: this.delivery });
}
}
onSubmit() {
console.log('Submit:', this.frm.value);
}
}
<form [formGroup]="frm" (ngSubmit)="onSubmit()">
<app-delivery [parent]="frm"></app-delivery>
<app-invoice *ngIf="hasShowed" [parent]="frm"></app-invoice>
<button type="submit" class="btn btn-primary">Send</button>
</form>
<button type="button" class="btn btn-secondary" (click)="show()">
show
</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment