angular5 模型驱动的无效形式答案

【问题标题】：angular5 model-driven invalid formangular5 模型驱动的无效形式
【发布时间】：2018-08-01 15:46:37
【问题描述】：

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

问题是：即使我为输入字段定义了“值”指令，表单始终无效。

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

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

【问题讨论】：

标签： angular forms validation updates reactive

【解决方案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

【讨论】：

谢谢你的回答，patchValue 方法似乎工作正常！感谢您提供示例，它有助于理解创建反应式模型驱动表单的方式！ :)
只有一件事我不明白：验证器错误的显示消息。按照你的例子，它只显示“字段是必需的”错误，其他的不显示：<mat-form-field> <input matInput name="noPoliceInterne" id="noPoliceInterne" formControlName="numeroPoliceInterne" placeholder="numeroPoliceInterne" required [ngClass]="{'is-invalid': displayMessage.numeroPoliceInterne }"/> <div class="errorMsg"> {{ displayMessage.numeroPoliceInterne }} </div> </mat-form-field>
我不清楚这个问题。您能否就此提出一个新问题并展开讨论？
哎呀，很抱歉很长时间：我发现了我犯的错误，现在一切都很好。非常感谢您的宝贵时间！

【解决方案2】：

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

【讨论】：

我已经在使用 FormBuilder。我不知道 setValue 和 patchValue 方法...谢谢！ :)