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

Posted 2023-03-16

【中文标题】错误类型错误：无法分配给“12345”上的属性“验证器”：不是对象

【英文标题】：ERROR TypeError: can't assign to property "validator" on "12345": not an object

【发布时间】：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 时没有数据显示在输入中

请将错误和所有基于文本的信息显示为问题中的文本，而不是文本图片。

【参考方案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)