1

I am trying to get the Angular form validation, i.e. ng-touched, ng-valid, etc. working on a input element without an ngModel binding. There are three radio buttons: a, b and ab, which I need to map to two booleans isA and isB. Hence I cannot use an ngModel binding.

I found a semi working solution, which is shown below. All the validation classes are set correctly but no matter what I select, it always shows the last radio button (ab) as selected, even tho I set a [checked] expression.

  <label>
    <input type="radio"
           name="selectAB"
           #selectA="ngModel"
           ngModel
           (click)="changeSelection(true, false)"
           [checked]="isA && !isB">
    <span>A</span>
  </label>
  <label>
    <input type="radio"
           name="selectAB"
           #selectB="ngModel"
           ngModel
           (click)="changeSelection(false, true)"
           [checked]="!isA && isB">
    <span>B</span>
  </label>
  <label>
    <input type="radio"
           name="selectAB"
           #selectAB="ngModel"
           ngModel
           (click)="changeSelection(true, true)"
           [checked]="isA && isB">
    <span>AB</span>
  </label>

Is there a way to get the angular validation working in template driven forms without having an ngModel binding?

Important Note

I cannot use reactive forms, since our entire application has been written with a template driven approach.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.