CODEWITHSUNDEEP
angularangular-forms
BHL
BHL

Reputation: 308

Facing issues with NgModel and [checked] for a radio input

So I'm working with submitting a angular form and i giving an option to update the data to the user ,But I'm not able to pre-check the radio button based on a condition when the input filed is binded with ngModel ,I'm a absolute beginner to angular so any help would be appreciated

app.component.html

<form #office="ngForm">
<div class="form-group pointer">
              <label for="Shift" class="font-weight-bold fs-6">Tansport <span class="text-danger">*</span></label><br>
              <div class="form-check form-check-inline">
                  <input class="form-check-input pointer" [checked]="editableData.transport.indexOf('cab') > -1" type="radio" ngModel  name="transport" id="transport-1" value="cab">
                  <label class="form-check-label" for="transport-1">Cab</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input pointer" [checked]="editableData.transport.indexOf('own') > -1" type="radio" ngModel name="transport" id="transport-2" value="own">
                  <label class="form-check-label" for="transport-2" >Own</label>
                </div>
          </div>
</form>

enter image description here

One of the checkbox needs to be checked based on a condition

Upvotes: 1

Views: 879

Answers (2)

Aakash Garg
Aakash Garg

Reputation: 10979

I have fixed it here :- https://stackblitz.com/edit/angular-ivy-vb5eeh?file=src%2Fapp%2Fapp.component.html

binded it with an object from class.

Upvotes: 1

Amnah Razzaki
Amnah Razzaki

Reputation: 502

I updated your stackblitz https://stackblitz.com/edit/angular-ivy-kylv5c

Why do you need this ngModel on radioButton though? If you want to access their value you can use the form value as well.

Upvotes: 0

Related Questions