angular 2 : 提交数据后验证成功

Question

i am not using Form tag in my html code the data is clear successfully and the route is injected also but the validation is fire after i make submit and new

<div class="col-lg-6 col-md-8">
   <input type="text" [disabled]="!isEditable" class="form-control" id="field-1" name="field1"  pattern = "^[0-9]*$" placeholder="" maxlength="30" required [(ngModel)]="country.countryCode" #field1 = ngModel>
       <div class="alert alert-danger" [hidden]="  (field1.valid || field1.pristine)">
            <ul>
                 <li> In vlaid name </li>
              <li [hidden]="errorData.errorDetails?.countryCode==null">{{errorData.errorDetails?.countryCode}}</li>
    </ul>
       </div>
 </div>

if (this.country.id == 0 || this.country.id == undefined) { // add
        this.dataService.add("country/save", this.country).then((status: any) => {
            if (status.success == false) {

            } else if (saveAction == 'saveNew') {                   
                this.country = {};
            } else if (saveAction == 'saveBack') {

                this.router.navigate(['/comm/country']);
            }
        });

Answer 1

<section *ngIf="active">
<div class="col-lg-6 col-md-8">
<input type="text" [disabled]="!isEditable" class="form-control"   id="field-1" name="field1"  pattern = "^[0-9]*$" placeholder="" maxlength="30" required [(ngModel)]="country.countryCode" #field1 = ngModel>
   <div class="alert alert-danger" [hidden]="  (field1.valid || field1.pristine)">
        <ul>
             <li> In vlaid name </li>
          <li [hidden]="errorData.errorDetails?.countryCode==null">{{errorData.errorDetails?.countryCode}}</li>
</ul>
   </div>
</div>

this.active = false;
                setTimeout(() => this.active = true, 0);

angular 2 : 提交数据后验证成功

angular 2 : after submitting data the validation is fire

angular2-forms

angular