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

Question

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

我尝试过的方法：拼写检查、不同的 FormControl 构造函数调用、删除完整性检查的条件逻辑。

TypeScript 文件：


  @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 关联的输入不显示 'Value Here'。对输入的更改不会更改它们应该关联的 formControl。此外，日期选择器 dateChange 事件中的日志事件记录了修复表单的状态。更改这些字段中的任何一个后，表单将是原始的和未被修改的。最后，在类似情况下创建的其他字段也有效。

Answer 1

更新，发现问题。在 'formControlName' 中打错了，只输入了 'formContolName'

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

Inputs not binding to FormControls with the same FormControlName

angular

angular-reactive-forms

angular-forms