无法从角度的子组件获取控件数据

Question

main.component.html

<form (ngSubmit)="onSubmit()" #formData="ngForm" />

<input type="text" ngModel name="firstName" />
<div class="row" [ngSwitch]="type">
<div *ngSwitchCase="'Employee'" class="col-sm-9 col-md-10">
<app-employee></app-employee>
</div>
<div *ngSwitchCase="'Customer'" class="col-sm-9 col-md-10">
<app-customer></app-customer>
</div>
</div>
<input type="submit" value="Save" />
</form>

main.component.ts

@ViewChild('formData') formData: NgForm;
onSubmit(){
console.log(formData.value);
}

employee.component.html：

<input type="text" class="form-control" ngModel name="Address"/>

只能获取名字值，但不能从 employee.component.html 获取任何值。

在这种情况下，方案是按照条件更改模板内容，并且不同的模板具有自己的不同控件。

我是否需要以不同的方式处理这种情况，或者我用来读取表单数据的方式是错误的？

Answer 1

你需要创建一个模型对象是每个子组件或使用来自parent=>child的@input传递模型对象。您可以在提交时访问父组件中的模型对象值。

Answer 2

您需要将数据从子组件发出到父组件，然后使用发射值填充相关的 formData。你可以做这样的事情：

employee.component.html：

<input type="text" class="form-control" [(ngModel)]="employee" />

employee.component.ts：

@Output() onEmployeeEntered = new EventEmitter<string>();
employee: string;
employeeChanged = () => {
this.onEmployeeEntered.emit(this.employee);
}

main.component.html：

<app-employee (onEmployeeEntered)="onEmployeeEntered(employee)"></app-employee>

main.component.ts：

onEmployeeEntered = (employee) => {
// add the employee to form data 
// let's say you have form data stored in form variable. 
// You can do something like this.
this.form.patchValue({
'employee': employee
});
}