单击Angular-4中的AddMore按钮时验证模板驱动的表单

时间:2018-09-11 08:14:52

标签: angular4-forms angular2-form-validation

我正在研究模板驱动的Angular表单。当用户单击“添加更多”按钮时,我想显示验证错误消息。

下面是我的表格。

    <form #billingLocationForm='ngForm' role="form" (ngSubmit)="formSubmit(billingLocationForm.value)" novalidate id="add_billing_contact_form" name="addBillingForm">
        <div class="col-lg-4 col-xs-6"> 
              <label for="bill_location_1">Billing location</label>
              <input type="text" id="bill_location_1" #billLocation1Ref="ngModel" [(ngModel)]="billLocation1_txt" name="billLocation1" required />

              <div *ngIf="billLocation1Ref.errors && (billLocation1Ref.dirty || billLocation1Ref.touched) " class="form_err_msg">
                   <div [hidden] ="!billLocation1Ref.errors.required">
                   Please enter your Billing location
                   </div>
              </div>               
        </div>          
    <button class="btn btn-block btn-full" type="submit" [disabled]="!billingLocationForm.form.valid">Submit</button>

</form>

<a href="javascript:void(0)" (click)="addMoreField()">
   <span class="glyphicon glyphicon-plus">Add More</span>
</a>   

请提出一种达到预期效果的方法。

谢谢

0 个答案:

没有答案