无法将变量分配给Angular 9中的输入值

问题陈述

I cannot seem to assign my variable values into my HTML input values, and there is an error in the console that says: TypeError: Cannot read property 'firstName' of undefined. Even though the error does not affect my app's function.

我要做什么

我正在尝试为用户创建一个编辑页面,他们可以在其中根据需要更新字段。我从服务中获取数据,并在HTML的输入中显示此人。这将允许用户编辑当前信息,而不必再次输入。

零件

export class EditDocumentComponent implements OnInit {

  // Is for population the fields in the UI so the user does not have to type in everything again
  private savedDocument: Will;

  // The current person ID that has been selected
  private personId: number;

  private form: FormGroup;

  constructor(private builder: FormBuilder, private serv: DataService, private route: ActivatedRoute) {
        this.route.queryParams.subscribe(params => {
          this.personId = params["personId"];
        });
   }

  ngOnInit() {
    // Calls service which gets a single person from the backend server
    this.serv.getSinglePersonById(this.personId).subscribe((result: Will) => {
      this.savedDocument = result;
    });

    this.form = this.builder.group({
      firstName: [''],
      lastName: [''],
      dateOfBirth: [''],
      postalAddress: [''],
      city: [''],
      country: [''],
      provinceState: [''],
    });
  }

  private sendUpdatedData() {
    console.log("Hit submit button");
    console.log("Person: " + this.savedDocument.postalAddress);
  }
}

代码说明

As you can see, I have a personID where it goes to the service and gets sent to the backend where it gets a single person. After that, the returning data gets assigned to savedDocument and that is the variable I use to display the data in the UI. Since I am getting firstName is undefined, but I made sure it is not by placing a console.log() in the method that submits the form which is called: sendUpdatedData(). It is not undefined.

的HTML

<body>
  <h1 class="title">Edit your document here</h1>

  <form [formGroup]="form">

    <!-- Section 1 -->
    <section class="form1">
      <mat-form-field appearance="outline" class="firstName">
        <mat-label>First Name</mat-label>
        <input matInput type="text" maxlength="50" value="{{savedDocument.firstName}}" formControlName="firstName">
      </mat-form-field><br>

      <!-- When I do this, it displays the data, which means it is not undefined
      <h1>{{savedDocument.firstName}}</h1>

      <mat-form-field appearance="outline" class="lastName">
        <mat-label>Last Name</mat-label>
        <input matInput type="text" maxlength="50" value="{{savedDocument.lastName}}" formControlName="lastName">
      </mat-form-field><br>

      <mat-form-field appearance="outline" class="dob">
        <mat-label>Date of Birth</mat-label>
        <input matInput type="text" maxlength="50" value="{{savedDocument.dateOfBirth}}" formControlName="dateOfBirth">
      </mat-form-field>
    </section>

... <!-- More here -->

</form>
</body>

代码说明

I am using value="{{savedDocument.field}}" in the input, but it does not show the data.

Also, when I remove the [formGroup] from the <form> tag, it does display the data in the value.

不以输入标签的值显示数据

<form [formGroup]="form">
...
</form>

以输入标签的值显示数据

<form>
...
</form>
评论