Can we set value Yes when the checkbox is check and No when its not check

Issue

My thought I am new angular and i'm trying to develop a angular code that when the checkbox is checked i want to set value to Yes and when its not check i want to set it to No. I'm not using ngmodel i'm using formcontrolname. ill leave my code below

TScode

changeStatus(event:Event){
    const isChecked = (<HTMLInputElement>event.target).checked;
    console.log(isChecked)
}

html If i need to add any code please help me

<mat-checkbox matinput formControlName="substanceAbuseAlcohol" color="primary" (change)="changeStatus($event)">Alcohol</mat-checkbox><br>

form

this.patientPastHistoryForm = new FormGroup({
      patientId: new FormControl(this.clientId),
      substanceAbuseAlcohol: new FormControl(''),
});

Solution

As you're using mat-check box you can use the event change and the property checked

<mat-checkbox  
      (change)="patientPastHistoryForm.get('substanceAbuseAlcohol').setValue(
        $event.checked ? 'Yes' : 'No')"
      [checked]="patientPastHistoryForm.get('substanceAbuseAlcohol').value=='Yes'" >
   Alcohol
</mat-checkbox>

NOTE and Personal opinion: in a real Project or in a simple exercise create a custom form control using ControlValueAccesor should be only to create a more complex component, if only is change "the aspect" of a check-box I consider unnecessary (else you need use this "special checkbox" in several several components)

Update

NOTE: Is an answer to the comment about three check-box relationated -really should be in another question-

When we has tree check box relationated we can do something like

<mat-checkbox  
      (change)="$event.checked && patientPastHistoryForm.get('substanceAbuseAlcohol').setValue('Yes') &&
patientPastHistoryForm.get('substanceAbuseDrugs').setValue('Yes')
"
      [checked]="patientPastHistoryForm.get('substanceAbuseAlcohol').value=='Yes' &&
patientPastHistoryForm.get('substanceAbuseDrugs').value=='Yes' " >
   Substance Abuse
</mat-checkbox>


<mat-checkbox  
      (change)="patientPastHistoryForm.get('substanceAbuseAlcohol').setValue(
        $event.checked ? 'Yes' : 'No')"
      [checked]="patientPastHistoryForm.get('substanceAbuseAlcohol').value=='Yes'" >
   Alcohol
</mat-checkbox>
<mat-checkbox  
      (change)="patientPastHistoryForm.get('substanceAbuseDrugs').setValue(
        $event.checked ? 'Yes' : 'No')"
      [checked]="patientPastHistoryForm.get('substanceAbuseDrugs').value=='Yes'" >
   Drugs
</mat-checkbox>

Well, when we has so many code in .html is time to translate the code to the .ts. So create three functions

checkAll()
{
    this.patientPastHistoryForm.get('substanceAbuseAlcohol').setValue('Yes')
    this.patientPastHistoryForm.get('substanceAbuseDrugs').setValue('Yes')
}

change(nameControl:string,checked)
{
    this.patientPastHistoryForm.get(nameControl).setValue(
        checked ? 'Yes' : 'No')"
}

parseValue(nameControls:string[])
{
    let checked:boolean=true;
    nameControls.forEach(x=>{
       checked=checked && this.patientPastHistoryForm.get(x).value=='Yes'"

    })
    return checked;
}

See that the function "parseValue" received an array of string. He loop over this array and return if all values are Yes true, else false

And our .html use this functions

<mat-checkbox  
      (change)="$event.checked && checkAll()"
       [checked]="parseValue(['substanceAbuseAlcohol','substanceAbuseDrugs'])>
   Substance Abuse
</mat-checkbox>


<mat-checkbox  
      (change)="change('substanceAbuseAlcohol',$event.checked)"
      [checked]="parseValue(['substanceAbuseAlcohol'])" >
   Alcohol
</mat-checkbox>
<mat-checkbox  
      (change)="change('substanceAbuseDrugs',$event.checked)"
      [checked]="parseValue(['substanceAbuseDrugs'])" >
   Drugs
</mat-checkbox>

Answered By - Eliseo