Angular2 <form>輸入驗證

Question

我有一個輸入字段，這是強制性的，以進入下一個頁面無法弄清楚如何驗證輸入（名稱）...在線搜索和嘗試各種事情，但無濟於事。 ..

任何幫助，高度讚賞...

<form> 
    <div> 
     <div class="form-group" style="width:50%"> 
     <label class="label label-info" for="Name">Enter Name:</label> 
     <input [(ngModel)]="Name" class="form-control" required type="text" 
     name="Name" id="Name" /> 
    </div> 
    <button kendoButton id="btnSearch" [primary]="true" 
      (click)="redirect()">Next</button> 
</div> 
</form> 

Answer 1

很簡單。我建議製作一個模型驅動的表單。

在您的組件：

myForm: FormGroup; 

constructor(private fb: FormBuilder) { 
     // We inject FormBuilder to our component 

     // Now, we instantiate myForm with FormBuilder 
     this.myForm = this.fb.group({ 
       name: [null, Validators.required] 
      }); 

    } 

在模板中，我們將與formControlName="name"取代[(ngModel)]。

對於您的下一個button，我們將在表單無效時將其禁用：[disabled]='!myForm.valid'。

另請參閱[formGroup]='myForm'的一部分。

<form [formGroup]='myForm'> 
    <div> 
     <div class="form-group" style="width:50%"> 
     <label class="label label-info" for="Name">Enter Name:</label> 
     <input formControlName="name" class="form-control" required type="text" 
     name="Name" id="Name" /> 
    </div> 
    <button kendoButton [disabled]='!myForm.valid' id="btnSearch" [primary]="true" 
      (click)="redirect()">Next</button> 
</div> 
</form> 

Answer 2

如果你需要使用Template Driven Forms而非Reactive Forms，你可以結合使用template reference variable參照ngModel觀看有關Name輸入字段錯誤，執行類似禁用按鈕，直到有效：

<form> 
    <div> 
     <div class="form-group" style="width:50%"> 
     <label class="label label-info" for="Name">Enter Name:</label> 
     <input [(ngModel)]="Name" class="form-control" required type="text" 
     name="Name" id="Name" #foo="ngModel" /> 
     </div> 
    <button kendoButton id="btnSearch" [primary]="true [disabled]="foo.errors" (click)="redirect()">Next</button> 
    </div> 
</form> 

但是對於較大的表單，validation以這種方式可能會很快變得混亂，每個字段都有一個模板引用變量。如果驗證和邏輯變得更加複雜，那麼可以考慮使用Reactive Forms。

這是演示功能的plunker。