angular2 - FormGroup验证不触发

时间:2017-07-05 15:01:58

标签: angular2-forms angular2-formbuilder angular-reactive-forms angular-validation

我在表单中有一个FormGroup。当我单击提交按钮时,我需要验证FormGroup控件,但它不会触发。 TransactionForm是表单,allocationForm是FormGroup。单击添加按钮,我需要验证FormGroup单独。必需的字段验证不会触发。

component.ts

this.transactionForm = this.fb.group({
  allocationForm: this.fb.group({
    fund: new FormControl(['', Validators.required]),
    amount: new FormControl(['', Validators.required]),
  })
});

HTML

<form novalidate *ngIf="transactionForm" [formGroup]="transactionForm" (ngSubmit)="submitTransaction()">
  <div class="form-group">
    <label for="name">name:</label>
    <input type="text" class="form-control" formControlName="name">
    <br/>
  </div>
  <fieldset formGroupName="allocationForm">
    <div class="form-group row">
      <label for="amount" class="col-lg-4 col-form-label">    {{labels.percent}}</label>
      <div class="col-lg-8">
        <input name="amount" type="number" class="form-control" placeholder="" min="1" step="1" formControlName="amount" required>
        <div class="form-control-feedback" *ngIf="errors.amount">
          errors.amount
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-lg-4 col-lg-8">
        <button type="button" class="btn btn-secondary" class="form-control" name="addButton" type="submit">Add</button>
      </div>
    </div>
  </fieldset>
</form>

1 个答案:

答案 0 :(得分:0)

在您的代码

     <input name="amount" type="number" class="form-control" placeholder="" min="1" step="1" formControlName="amount" required>

在div标签之后你使用了错误的条件, 它应该是* ngIf =&#34; name.errors。&lt;&gt;&#34;, 例: * ngIf =&#34; amount.errors.min&#34 ;. 希望它有所帮助