如何以 angular5 形式实现条件？答案

【问题标题】：How to implement conditions in angular5 forms ?如何以 angular5 形式实现条件？
【发布时间】：2018-11-07 13:47:08
【问题描述】：

我在 angular5 工作，我正在创建一个简单的表单：

 <div class="modal-body">

    <div class="form-group row">
      <label class="col-sm-5 col-form-label">Choisir un client : </label>


      <div class="col-sm-6">

        <ng-select  *ngIf="_listClients"
                     [items]="_listClients"
                      bindLabel ="nom"
                      bindValue ="id"
                    [(ngModel)]="selectedPersonId">
        </ng-select>

      </div>
    </div>

    <label class="col-sm-5 col-form-label">Information liées au contrat : </label>
    <div class="form-group row">
      <label class="col-sm-5 col-form-label" >Date one :  </label>
      <div class="col-sm-6">
        <input type="date" class="form-control form-control-sm"
               placeholder=".form-control-sm"  [(ngModel)]="dateOne">
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-5 col-form-label" for="input-small">Date two : </label>
      <div class="col-sm-6">
        <input type="date" id="input-small" name="input-small" class="form-control form-control-sm"
               placeholder=".form-control-sm"  [(ngModel)]="dateTwo">
      </div>
    </div>
  </div>

 <button type="button" class="btn btn-primary" (click)="addProjecToClients()" >Save changes</button>

我想以这种形式做的条件：dateOne 应该总是大于 dateTwo。

因此，当用户在提交表单之前选择大于 dateOne 的 dateTwo 时，我想显示一条错误消息。我认为这应该在他选择第二个输入“dateTwo”然后验证上述条件时发生。

angular5 是否提供任何有用的库或方法来说明如何做到这一点？还是我应该自己做？

【问题讨论】：

Angular 提供了基本的提供者，依赖于其他字段的验证必须由您完成。您可以订阅第二个日期字段的值更改，并在您的自定义验证器中比较第一个和第二个的值。
自定义验证器？它与角度有关吗？或者我要创建的方法来实现这个。
这是有角度的东西，您可以在其中实现自定义逻辑来验证您的表单。有很多关于如何做到这一点的文章。
啊，好吧，我已经阅读了一些关于此的文章，但仍然无法达到我想要的。

标签： angular frontend angular5

【解决方案1】：

您应该使用 FormGrup/FormControls。它们为您提供验证所需的一切，有一些但您可以自定义它们。 formControls 有一个属性 invalid 指示您何时可以使用表单。我建议查找有关它们的信息。

【讨论】：