角2：ngmodelバインディングなしでテキストボックスに必要な検証を追加する

Question

要件： リストをカンマ区切りの値としてテキストボックスにフォーマットします。

質問

これを実装するためのより良い方法があります：

import { Component } from '@angular/core'; 

    @Component({ 
     template: ` 
     <input 
      style="width:400px;" 
      (focusout)="update($event.target.value);" 
      value="{{hobbies.join(', ')}}" 
      #ipHobbies 
     /> 
     <br> 
     {{hobbies}} 
     ` 
    }) 

    export class TestComponent { 
     hobbies: string[] = ["painting", "cooking", "swiming"]; 
     update(csvHobbies): void { 
      csvHobbies = csvHobbies.trim(); 
      this.hobbies = csvHobbies.split(",") 
       .map((item) => { return item.trim() }) 
       .filter((item) => { return item != "" }); 
     } 
    } 

出力は、例えば以下のように、私のコンポーネントがありますか？ユーザーに必要な検証メッセージを追加するにはどうすればよいですか？

Answer 1

ローカル変数#ipHobbiesにisEmptyプロパティを追加し、それをfocusoutイベントで更新することによって、必要な検証メッセージを追加できます。

import { Component } from '@angular/core'; 
    @Component({ 
     template: ` 
     <input 
      (focusout)="ipHobbies.isEmpty=!update($event.target.value);" 
      value="{{hobbies.join(', ')}}" 
      #ipHobbies 
     /> 
     <div *ngIf="ipHobbies.isEmpty"> 
      <span 
       [hidden]="!ipHobbies.empty" 
       class="label label-warning" 
      > 
      Hobbies are required 
      </span> 
     </div>  
     ` 
    }) 

    export class TestComponent { 
     hobbies: string[] = ["painting", "cooking", "swiming"]; 
     update(csvHobbies): boolean { 
      if (csvHobbies == "") { 
       this.hobbies = []; 
       return false; 
      } 
      csvHobbies = csvHobbies.trim(); 
      this.hobbies = csvHobbies.split(",") 
       .map((item) => { return item.trim() }) 
       .filter((item) => { return item != "" }); 
      return true; 
     } 
    } 

出力

これを実装するためのより良い方法があれば更新してください。