当我们单击父级按钮时,我们希望使用来自父级的子级反应式表单数据。目前我们正在使用 viewchild 来获取子组件引用。我们正在获取所有静态数据,但没有获取表单填充的数据....................................... ...................................................... ............
parent.component.ts
@ViewChild(DetailsComponent) childrenComponent: childrenComponent;
save(){
let model=this.childrenComponent.buildDetailsModel();
/*here api to save model*/
}
children.component.ts
buildDetailsModel(): Details {
var a = {
reportedToId: this.detailsForm.get('reportedTo').value,
reportedOn: this.detailsForm.get('reportedTime').value,
identifiedById: this.detailsForm.get('identifiedBy').value,
identifiedOn: this.detailsForm.get('dateAndTimeIdentified').value,
locationTypeId: this.detailsForm.get('locationType').value,
addressId: this.detailsForm.get('locationAddress').value,
AddressLine: this.detailsForm.get('locationOfAddress').value,
description: this.detailsForm.get('description').value,
PeopleExposed: this.dataSource
};
return a;
}
parent.html
<child></child>
child.html
<form [formGroup]="detailsForm">
<div fxLayout="column wrap" fxLayoutGap="12px">
<div fxLayout="column" fxLayout.lt-sm="column" fxLayout.lt-md="column"
fxLayoutGap="24px">
<div fxFlex="row" fxLayoutGap="24px" fxLayout.lt-md="column">
<div fxFlex="column">
<mat-form-field>
<mat-label>Reported To</mat-label>
<mat-select matInput formControlName="reportedTo">
<mat-option value="Test 1">Test 1</mat-option>
<mat-option value="Test 2">Test 1</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="reportedTime" placeholder="Date
and time reported" date="true" time="true"
formControlName="reportedTime">
<mat-datepicker-toggle matSuffix [for]="reportedTime"></mat-
datepicker-toggle>
<mat-datepicker #reportedTime></mat-datepicker>
</mat-form-field>
<mat-form-field>
<mat-label>Identified by</mat-label>
<mat-select matInput formControlName="identifiedBy">
<mat-option value="Test 1">Test 1</mat-option>
<mat-option value="Test 2">Test 1</mat-option>
</mat-select>
</mat-form-field>
</div>
将子表单包裹在表单元素内,以便您可以从父表单提交子表单,然后在子组件中注入 FormGroupDirective 以获取父表单的引用
<form (ngSubmit)="save()" [formGroup]="detailsForm">
<app-child></app-child>
<button type="button">Save</button>
</form>
然后使用controlContainer在子组件中提供现有的FormGroupDirective
子组件.ts
form;
constructor(private fb: FormBuilder, @Host() private parentFor: FormGroupDirective) { }
ngOnInit() {
this.form = this.parentFor.form;
//Add FormControl as per your need
this.form.addControl('child', this.fb.group({
name: "",
email: ""
}))
}
子组件.html
<form formGroupName="child">
<input formControlName="name">
<input formControlName="email">
</form>
Example:https://stackblitz.com/edit/angular-xusdev
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)