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关联的输入不会显示“此处的值”。输入的更改不会更改应该与之关联的formControl。此外，datepicker dateChange事件中的日志事件记录了修复表单的状态。更改这些字段中的任何一个之后，该表格将保持原始状态。最后，在类似情况下还会创建其他有效的字段。

Answer 1

更新，发现了问题。在“ formControlName”中输入错误，仅输入“ formContolName”

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

1 个答案: