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.