I have a form styled with bootstrap4
and am using ember-cp-validations
to validate it.
<div class="form-group {{if showNameError 'has-danger' ''}}">
<label for="name" class="cols-sm-2 control-label">Full Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon">{{fa-icon "user"}}</span>
{{input id="name" class="form-control" value=user.firstname placeholder="Enter your Name" focus-out=(action (mut showNameError) true)}}
</div>
</div>
{{#if showNameError}}
{{#if (v-get user "firstname" "isInvalid")}}
<div class="form-control-feedback container">
<span>{{v-get user 'firstname' 'message'}}</span>
</div>
{{/if}}
{{/if}}
</div>
Using {{if showNameError 'has-danger' ''}}
, I am able to set the class to has-danger
when showNameError
is true, however when it is false, the class remains there and the has-danger
persists.
As you can see, after I fix the error the has-danger
class remains. My question is, can I make it so the class toggles based on whether the input is valid or not.
Changed to and it is performing as it should.