angular5模型驱动无效表单

Question

我目前正在尝试用验证器构建一个模型驱动的表单。在这种形式中，我从从API获得的模型中传递值。

问题是:即使我为输入字段定义了"value“directiv，表单也总是无效的。

我不明白为什么我从模型中得到的值与我的验证器相符.

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的角服务，用于创建formControls和formGroup，而不是使用setValue初始化表单(所有值一次)！(你的html是对的)