ionic2の入力フィールドを検証する方法は？

Question

私はイオン2と角度を学んでいます。イオンのバリデーションについて知りたい。私は

入力フィールドに異なる検証を使用するにはどうすればよい

要件

私は、次のフィールドを検証します。

<ion-content padding style="background-color: #f5f8fa;"> 
    <form #newtask="ngForm"> 
    <ion-label style="color:#818993;margin-bottom:1px; font-size:15px;">Task</ion-label> 
    <ion-list> 
     <ion-item> 
     <ion-textarea rows="6" style="color:#818993;box-shadow:none;" placeholder="Describe your task" name="taskdesc" ngModel></ion-textarea> 
     </ion-item> 
    </ion-list> 
    <ion-label style="color:#818993;margin-bottom:1px; font-size:15px;">Assign to</ion-label> 
    <ion-list> 
     <ion-item> 
     <ion-label style="color:#818993;margin-bottom:1px; font-size:15px;">Primary</ion-label> 
     <ion-select item-end name="primary" [ngModel]="primary" > 
      <ion-option style="color:#818993;" *ngFor="let list of dataa; let i= index;" >{{list.USR}}</ion-option> 
     </ion-select> 
     </ion-item> 
    </ion-list> 
    <ion-label style="color:#818993;margin-bottom:1px; font-size:15px;">Priority</ion-label> 
    <ion-card style="margin:0;padding:10px 0px;width:100%;box-shadow:none;" radio-group> 
     <input type="radio" [ngModel]="priority" class="high" value="High" style="margin:5px 5px 5px 20px;" name="priority"> <label style="color:#818993;margin:-20px 27px 0px 0px;" class="pri">High </label> 
     <input type="radio" [ngModel]="priority" class="medium" value="Medium" style="margin:5px 5px 5px 15px;" name="priority"> <label style="color:#818993;;margin:-20px 27px 0px 0px;" class="pri">Medium </label> 
     <input type="radio" [ngModel]="priority" class="low" value="Low" style="margin:5px 5px 5px 10px;" name="priority"> <label style="color:#818993;margin:-20px 0px 0px 0px;" class="pri" >Low </label> 
    </ion-card> 
     </form> 
<button ion-button type="submit" (click)="onsubmit(newtask.value)"> 
    <ion-icon name="checkmark"></ion-icon> 
    </button> 
</ion-content> 

Answer 1

Angulars FormsとFormBuilderを見てみましょう。ここには、これらの使用方法に関する優れた記事があります。https://coryrylan.com/blog/angular-form-builder-and-validation-management

既存のバリデータから選択することも、独自のバリデータを作成することもできます。 これは基本的な使い方です：

// In your .ts 
this.form = this.formBuilder.group({ 
    'name': ['', [Validators.required, Validators.minLength(10)]], 
    'surname': ['', [Validators.required, myCustomValidator]] 
}); 

// custom validator (control is valid if its value includes "foo") 
myCustomValidator(control) { 
    if(control && control.value && control.value.includes("foo")) { 
     return null; 
    } 
    return { 'surname does not include foo': true }; 
} 

// In your HTML 
<form id="form" [formGroup]="form" (ngSubmit)="submit()"> 
    <ion-input formControlName="name" type="text" placeholder="name"></ion-input> 
    <ion-input formControlName="surname" type="text" placeholder="surname"></ion-input> 
    <button form="form" type="submit" [disabled]="!form.valid"></button> 
</form>