Angular Validation on Button as Fields in Template Driven Form

Question

I have a form field as Results, where I have used Template Driven Angular Form. I am able to validate a form with dropdown, input, radio, checkbox, and other input fields. But have buttons as Pass, Fail, and Not Applicable for different rules. How to apply the required field on buttons. Is there any way to achieve this? Attaching a screenshot for good understanding. Or Should I use a radio button group and style them as buttons.

Use radio button instead, since Button can't bind value change for it with NgModel. Unless you can create a custom form control for it. Here is a article for how to create custom form control blog.thoughtram.io/angular/2016/07/27/… — Kevin Zhang

Abhijeet Raj Abhijeet Raj · Accepted Answer · 2020-12-29T15:17:58

This can be achieved by using ngClass or ngStyle on condition basis. Here you can bind these buttons with disabled attribute and apply styles accordingly. For example, some of them which are pass. It should be highlighted and rest should be made disabled. This is manageable.

Other option is as you said using radio buttons and make them look like buttons, it will make it much easier as you will be able use value change in case of radio button.

Angular Validation on Button as Fields in Template Driven Form

1 Answers