错误类型错误：无法分配给“12345”上的属性“验证器”：不是对象答案

【问题标题】：ERROR TypeError: can't assign to property "validator" on "12345": not an object错误类型错误：无法分配给“12345”上的属性“验证器”：不是对象
【发布时间】：2021-09-06 21:02:22
【问题描述】：

我想构建一个预先填写的表单，到目前为止，当我尝试显示表单页面时出现此错误。我尝试了各种给出的解决方案，但在这里似乎不起作用。

我的 hardwareRequest.ts

hardwareReviewForm: FormGroup;
  assetSerialNumber = new FormControl('');
  modelType = new FormControl('');



ngOnInit(): void {
    this.data = []
    this.service.loadRequestData(this.requestId).subscribe(
      (response: any) => {
        
        this.data = response
        console.log(this.data)
        this.assetSerialNumber = this.data.assetSerialNumber
        this.modelType = this.data.modelType

      },
      (error) => {

       
      }
    )
  }

我的 HTML 文件

<form class="example-container" [formGroup]="hardwareReviewForm" (ngSubmit)="onFormSubmit()">
                
              <div class="ds-col-12" style="margin-bottom: 10px;">
                <div class="ds-col-6">
                  <mat-form-field appearance="outline">
                      <mat-label>Asset Serial Number: </mat-label>
                      <input formControlName="assetSerialNumber" readonly matInput type="text">
                  </mat-form-field>
              </div>

              <div class="ds-col-6">
                  <mat-form-field appearance="outline">
                      <mat-label>Part No./Model Type: </mat-label>                
                          <input formControlName="modelType" readonly matInput type="text">                     
                  </mat-form-field>
              </div>
              </div>

            </form>

【问题讨论】：

当我使用 [formControl] 时出现错误，但是当我使用 formControlName 时没有数据显示在输入中
请将错误和所有基于文本的信息显示为问题中的文本，而不是文本图片。

标签： html angular typeerror

【解决方案1】：

您可以为您的字段创建一个“查看模型”，然后用它重置您的表单。

  export class testVm {
        assetSerialNumber : number;
        modelType : string;
    }
  var model: testVm = this.data;
  this.hardwareReviewForm.reset(model)

或者，如果您想单独分配值，您应该这样做：

this.hardwareReviewForm.controls["assetSerialNumber"].reset(this.data.assetSerialNumber.toString())

【讨论】：

【解决方案2】：

首先，你必须在formGroup中定义表单控件；

hardwareReviewForm = new FormGroup({
  assetSerialNumber = new FormControl('');
  modelType = new FormControl('');
});

其次，您将值设置为如下所示的控件；

this.hardwareReviewForm.get('assetSerialNumber').setValue(this.data.assetSerialNumber);

【讨论】：

【解决方案3】：

我想通了.. .setValue 用于表单控件是一个愚蠢的错误。如下设置我的值可以正常工作。

this.Number.setValue(this.data.Number) this.Type.setValue(this.data.Type)

【讨论】：