@ViewChild returns 子组件形式的未定义引用

Question

我在父组件中有一个表单将数据作为输入传输到子组件属性子组件有一个表单可以读取此数据并使用此数据预填充其表单作为一种方式编辑用户配置文件。在我尝试使用传输的数据设置输入字段的行中，chrome returns 控制台错误表明它无法读取未定义的 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>

Answer 1

// query results available in ngOnInit
@ViewChild('f', {static: true}) eForm: NgForm;

或者


ngAfterViewInit() {

this.eForm.setValue({
    firstname: this.employee.user.firstname,
    lastname: this.employee.user.lastname,
    email: this.employee.user.email
  });

}

https://angular.io/guide/static-query-migration

@ViewChild returns 子组件形式的未定义引用

@ViewChild returns undefined reference in child component form

angular

angular-forms