angular5模型驱动的无效形式

Question

我目前正在尝试使用验证器构建模型驱动的表单。在这种形式下，我传递了从 API.

返回的模型中的值

问题是：即使我为我的输入字段定义了 "value" 指令，表单总是无效的。

我不明白为什么，因为我从模型中获得的值与我的验证器匹配...

html代码：

<form (ngSubmit)="addOrUpdate()" [formGroup]="policyForm" class="form">

        <div class="containerLeft">
          <mat-form-field>
            <input matInput name="noPoliceInterne" id="noPoliceInterne" formControlName="numeroPoliceInterne"
            placeholder="numeroPoliceInterne"
            value="{{policy.numeroPoliceInterne}}" required />
          </mat-form-field>
          <br>

          <mat-form-field>
            <input matInput name="nomClient" id="nomClient" formControlName="nomClient"
            placeholder="Client"
            value="{{policy.nomClient}}" required />
          </mat-form-field>
          <br>

          <mat-form-field>
            <input matInput name="mtPrimeNetteAnnuelle" id="mtPrimeNetteAnnuelle" formControlName="montantPrimeNetteAnnuelle"
            placeholder="Prime nette annuelle "
            value="{{policy.montantPrimeNetteAnnuelle | currency}}" required />
          </mat-form-field>
          <br>
     </div>
        <div class="buttons">
          <button mat-raised-button type="button" [routerLink]="['/policies']">Back</button>
          <button mat-raised-button *ngIf="policy.numeroPoliceInterne > 0" type="submit" color="primary" [disabled]="policyForm.invalid">Update</button>
          <button mat-raised-button *ngIf="policy.numeroPoliceInterne == 0" type="submit" color="primary" [disabled]="policyForm.invalid">Add</button>
        </div>
      </form>

组件代码：

ngOnInit() {
    this.createFormControls();
    this.createForm();
  }

  createFormControls() {
    this.numeroPoliceInterne = new FormControl(this.numeroPoliceInterne, [Validators.required, Validators.minLength(1)]);
    this.noPoliceEtOrdre = new FormControl(this.noPoliceEtOrdre, Validators.required);
    this.noCompte = new FormControl(this.noCompte, Validators.required);
    this.noCompagnie = new FormControl(this.noCompagnie, Validators.required);
    this.nomClient = new FormControl(this.nomClient, Validators.required);
    this.montantPrimeNetteAnnuelle = new FormControl(this.montantPrimeNetteAnnuelle, Validators.required);
    this.montantPrimeTTCAnnuelle = new FormControl(this.montantPrimeTTCAnnuelle, Validators.required);
    this.dateEffetPolice = new FormControl(this.dateEffetPolice);
  }


  createForm() {

    this.policyForm = this.fb.group({

      numeroPoliceInterne: this.numeroPoliceInterne,
      noPoliceEtOrdre: this.noPoliceEtOrdre,
      noCompte: this.noCompte,
      noCompagnie: this.noCompagnie,
      nomClient: this.nomClient,
      montantPrimeNetteAnnuelle: this.montantPrimeNetteAnnuelle,
      montantPrimeTTCAnnuelle: this.montantPrimeTTCAnnuelle,
      dateEffetPolice: this.dateEffetPolice,

    });
  }

我是不是漏掉了什么...？问候， j0w

Answer 1

对于反应式（模型驱动）表单，它无法识别使用 value 属性设置的值。相反，您需要使用 setvalue 或 patchValue 来设置默认值。

this.productForm.patchValue({
  productName: this.product.productName,
  productCode: this.product.productCode,
  starRating: this.product.starRating,
  description: this.product.description
});

您可以在此处找到完整的工作示例：https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/APM-Updated

Answer 2

尝试在您的组件中使用 formBuilder，它是 ReactiveFormModule 的一项 Angular 服务，用于创建您的 formControl 和 formGroup，而不是使用 setValue（所有值一次）初始化您的表单！（你的html没错）！

angular5模型驱动的无效形式

angular5 model-driven invalid form

forms

validation

updates

reactive

angular