angular - 输入未绑定到具有相同 FormControlName 的 FormControl

Question

目前，我面临一个问题，即模板未绑定到共享名称的表单控件，从而删除了完整性检查的条件逻辑。

我尝试过：拼写检查、不同的 FormControl 构造函数调用、删除条件逻辑以进行健全性检查。

打字稿文件：

  @Input() repairForm: FormGroup;
  .
  .
  .
  ngOnInit() {
    this.isAuthorized = this.authService.isAuthorized;

    if(this.isAuthorized){
      this.repairForm.addControl('customerNumber', new FormControl('',))
      this.repairForm.addControl('originDate', new FormControl('',))
      this.repairForm.addControl('originTime', new FormControl('',))
      this.repairForm.addControl('originCity', new FormControl('Value Here',))
      this.repairForm.addControl('originState', new FormControl('',))
    }
    // other form code goes here
  }

模板文件：

<form [formGroup]="repairForm">
  .
  .
  .
  <div *ngIf="isAuthorized ">
    <div class="form-row">
      <mat-form-field>
        <input matInput formContolName="customerNumber" placeholder="Customer Number">
      </mat-form-field>
    </div>
    <div class="form-row">
      <mat-form-field>
        <input matInput formContolName="originCity" placeholder="Origin City">
      </mat-form-field>
      <mat-form-field>
        <input matInput formContolName="originState" placeholder="Origin State">
      </mat-form-field>
    </div>
    <div class="form-row">
      <mat-form-field >
        <input matInput [matDatepicker]="picker" formContolName="originDate" placeholder="Origin Date" (dateChange)="logEvent()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <mat-form-field>
        <input matInput formContolName="originTime" placeholder="Origin Time">
      </mat-form-field>
    </div>
  </div>
  .
  .
  .
</form>

加载表单时，与 originCity 关联的输入不显示“此处的值”。对输入的更改不会更改它们应该与之关联的 formControl。此外，来自 datepicker dateChange 事件的日志事件会记录修复表单的状态。更改任何这些字段后，表单将保持原始状态。最后，在类似情况下创建的其他字段也有效。

标签： angularangular-reactive-formsangular-forms

Answer 1

更新，发现问题。在“formControlName”中打错字，只输入“formContolName”