Angular 6 patchValue Not Setting..sometimes

Question

我有一个如下所示的基本表单。我调用一个API来获取用户的个人信息，并希望用适当的值填充表单域。我一直在尝试使用patchValue，但是我不能让它工作。

    <form (ngSubmit)="onSubmit" class="example-form" [formGroup]="firstFormGroup" #registerForm="ngForm">
<mat-form-field class="example-full-width">
  <input matInput placeholder="Company" formControlName="company" required autofocus>
  <mat-error *ngIf="firstFormGroup.get('company').hasError('required')">
    Company name is
    <strong>required</strong>
  </mat-error>
</mat-form-field>

<table class="example-full-width" cellspacing="0">
  <tr>
    <td>
      <mat-form-field class="example-full-width">
        <input matInput placeholder="First name" formControlName="first_name" required>
        <mat-error *ngIf="firstFormGroup.get('first_name').hasError('required')">
          First name is
          <strong>required</strong>
        </mat-error>
      </mat-form-field>
    </td>
    <td>
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Last Name" formControlName="last_name" required>
        <mat-error *ngIf="firstFormGroup.get('last_name').hasError('required')">
          Last name is
          <strong>required</strong>
        </mat-error>
      </mat-form-field>
    </td>
  </tr>
  <tr>
    <td>
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Email" formControlName="email" required>
        <mat-error *ngIf="firstFormGroup.get('email').hasError('email') && !email.hasError('required')">
          Please enter a valid email address
        </mat-error>
        <mat-error *ngIf="firstFormGroup.get('email').hasError('required')">
          Email is
          <strong>required</strong>
        </mat-error>
      </mat-form-field>
    </td>
  </tr>
</table>

<p>
  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Address" formControlName="address" required></textarea>
  </mat-form-field>
  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Address 2"></textarea>
  </mat-form-field>
</p>

<table class="example-full-width" cellspacing="0">
  <tr>
    <td>
      <mat-form-field class="example-full-width">
        <input matInput placeholder="City" formControlName="city" required>
      </mat-form-field>
    </td>
    <td>
      <mat-form-field class="example-full-width">
        <mat-select placeholder="State" formControlName="state" required>
          <mat-option>None</mat-option>
          <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
        </mat-select>
      </mat-form-field>
    </td>
    <td>
      <mat-form-field class="example-full-width">
        <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="" formControlName="zip" required>
        <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
      </mat-form-field>
    </td>
  </tr>
</table>
<button type="submit" class="register" mat-button (click)="check()"
  color="primary">Save</button>
      <!-- <button type="submit" [disabled]="!registerForm.form.valid" class="register" mat-button (click)="check()" color="primary">Save</button> -->

​

这是我的ts文件：

import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';
import { FormControl, Validators, FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

  firstFormGroup: FormGroup;
  profileInfo: Object[];


  constructor(private _formBuilder: FormBuilder, private _auth: LoginService) { }
  getInfo() {
    let value;
    this._auth.profile({'username': 'evanlalo'})
    .subscribe(res => {
        for (const item in res) {
          if (this.firstFormGroup.value.hasOwnProperty(item)) {
            value = res[item];
            console.log(value);
            this.firstFormGroup.patchValue({ item: value });
            console.log(item, res[item]);
          }
        }

    });
 }




  ngOnInit() {


    this.firstFormGroup = this._formBuilder.group({
      company: new FormControl('', Validators.required),
      first_name: new FormControl('', Validators.required),
      last_name: new FormControl('', Validators.required),
      address: new FormControl('', Validators.required),
      city: new FormControl('', Validators.required),
      state: new FormControl('', Validators.required),
      zip: new FormControl('', Validators.required),
      email: new FormControl('', [
        Validators.required,
        Validators.email,
      ])
    });

    this.getInfo();

  }

}

所有键都与表单域名称匹配，但是如果我使用item变量，它将不起作用。奇怪的是，如果我硬编码字段名IE company，这个字段就会被设置。

任何帮助都将不胜感激。

谢谢,

Answer 1

在您的例子中，patchValue语法是错误的。

正确的语法是，

this.firstFormGroup.patchValue({[item]: value});

使用项目而不是项目

item它表示添加到formGroup的动态密钥

Answer 2

如果以某种方式在patchValue中没有定义任何值部分，那么它也无法工作。例如，在下面的示例中，如果我想修补一些列，如id、projectName等，但不知何故this.project.Id元素是未定义的(不是从服务填充的)，那么patchValue也不会在不抛出任何错误的情况下工作。

 this.projectForm.patchValue({
      id: this.project.Id,
      ProjectName: this.project.ProjectName
 });

Answer 3

如果您正在使用Angular 9+，请阅读以下内容。

在Angular文档中，使用setValue({key: value})而不是patchValue({key: value})是有意义的，因为setValue不会容忍错误。如果你的对象是嵌套的/复杂的，你将会被抛出。

有两种更新模型值的方法：

使用setValue()方法为单个控件设置新值。setValue()方法严格遵循

窗体分组并替换控件的整个值。

使用patchValue()方法替换在表单模型中已更改的对象中定义的任何属性。

对setValue()方法的严格检查有助于捕获复杂表单中的嵌套错误，而patchValue()在出现这些错误时会自动失败。

此外，您不能使用patchValue({[key]: value}); //no parenthesis