Angular form validation classes without ngModel

233 Views Asked by At

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

There are 0 best solutions below