<分区>
我在父组件中有一个表单将数据作为输入属性传输到子组件，而子组件有一个表单读取此数据并使用此数据预填充其表单作为编辑用户配置文件的一种方式。在我尝试使用传输的数据设置输入字段的行中，chrome 返回一个控制台错误，指出它无法读取未定义的 setValue 属性。代码可能有什么问题？
这是代码:
this.eForm.setValue({
firstname: this.employee.user.firstname,
lastname: this.employee.user.lastname,
email: this.employee.user.email
});
子组件:
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { NgForm, ControlContainer } from '@angular/forms';
@Component({
selector: 'app-manager-view-employee-profile',
templateUrl: './manager-view-employee-profile.component.html',
styleUrls: ['./manager-view-employee-profile.component.css'],
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class ManagerViewEmployeeProfileComponent implements OnInit {
@ViewChild('f', {static: false}) eForm: NgForm;
@Input() employee: any;
constructor(private dataService: DataService) { }
ngOnInit() {
console.log(this.eForm);
console.log(this.employee.user.firstname);
this.eForm.setValue({
firstname: this.employee.user.firstname,
lastname: this.employee.user.lastname,
email: this.employee.user.email
});
}
onSubmit(f: NgForm){
}
}
子组件模板:
<form class="col-md-6" (ngSubmit)="onSubmit(f)" #f="ngForm">
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">First Name</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" name="firstname" ngModel required>
<span *ngIf="f.form.controls.firstname?.touched && !f.form.controls.firstname?.valid" style="color: red;">A is required.</span>
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">Last Name</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" name="lastname" ngModel required>
<span *ngIf="f.form.controls.lastname?.touched && !f.form.controls.lastname?.valid" style="color: red;">A is required.</span>
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">Email</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" name="email" ngModel required>
<span *ngIf="f.form.controls.email?.touched && !f.form.controls.email?.valid" style="color: red;">An email is required.</span>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!f.form.valid">Search</button>
</form>