Angularオブジェクトが存在するときにCSSを変更するにはどうすればよいですか？

Question

.ng-valid [必須]メソッドを使用して、角度入力コンポーネントのCSSを変更しています。このコンポーネントは、使用して電子メールの文字列パターンを検証している。ここで

pattern="[^@]+@[^@]+\.[a-zA-Z]{2,} and changing the colour. 

をテンプレートです：私は、ユーザーがデータベースにすでに存在していることを発見した場合

<input *ngIf="(type == 'email') && showValidation" type={{type}} placeholder={{placeholder}} name={{name}} required class="textfield {{align}}" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" [(ngModel)]='inputText' (keyup)="onValueChange(inputText)" (blur)="onBlur($event)"> 

は、どのように私はCSSを使って色を変更できますか？電子メールは、これが「真」として検証する必要があります存在し、私は「のborder-left」の色を変更したい場合は

<wf-input tabindex="0" #username placeholder="Email address" type="email" showValidation="true" (inputEvnt)='user.emailAddress = $event' 
      (inputEvnt)='validateInputs()' (blur)="checkEmail(user.emailAddress)" name="registration-form_email"></wf-input> 

：

.ng-valid[required], 
.ng-valid.required { 
    border-left: 5px solid #4fd987; 
    /* green */ 
} 
.ng-invalid:not(form) { 
    border-left: 5px solid #e55a5a; 
    /* red */ 
} 

この

は、カスタム入力コンポーネントです。

この例では、ngUniqueを使用してAngularJS（1.x）を使用していますが、Angular 2+では機能しません。

Example

Answer 1

あなたは[style.border左-色] = "emailValidated 'グリーン'： '赤'？" を追加することができますuは、より詳細に教えてくださいでき

<wf-input tabindex="0" 
    #username 
    placeholder="Email address" 
    type="email" showValidation="true" 
    (inputEvnt)='user.emailAddress = $event' 
    (inputEvnt)='validateInputs()' 
    (blur)="checkEmail(user.emailAddress)" 
    name="registration-form_email" 
    [style.border-left-color]="emailValidated ? 'green' : 'red'"> // Add here 
</wf-input>