我们可以在复选框被选中时设置值 Yes 而在未选中时设置 No

Question

我的想法 我是新手 angular，我正在尝试开发一个 angular 代码，当复选框被选中时，我想将值设置为是，当它未被选中时，我想将其设置为否。我'我没有使用 ngmodel 我正在使用 formcontrolname。我会在下面留下我的代码

TScode

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

html 如果我需要添加任何代码，请帮助我

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

形式

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

Answer 1

Stackblitz

有点hacky但下面的作品使用html

中的变量

  <mat-checkbox
    color="primary"
    (change)="
      patientPastHistoryForm.controls['substanceAbuseAlcohol'].setValue(
        saveValue.checked ? 'Yes' : 'No'
      )
    "
    #saveValue
  >
    Alcohol
  </mat-checkbox>

Answer 2

当您使用 mat-check 框时，您可以使用事件 change 和属性 checked

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

注意和个人意见：在实际项目或简单练习中使用 ControlValueAccessor 创建自定义表单控件应该只是为了创建更复杂的组件，如果只是改变 check-box 我认为没有必要（否则你需要在几个组件中使用这个“特殊复选框”）

更新

注意：关于三个 check-box 相关的评论的答案 - 真的应该在另一个问题中 -

当我们有相关的树复选框时，我们可以做类似的事情

<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>

好吧，当我们在 .html 中有这么多代码时，是时候将代码转换为 .ts 了。所以创建三个函数

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;
}

看到函数“parseValue”接收到一个字符串数组。他遍历这个数组并且 return 如果所有值都是 true，否则 false

而我们的 .html 使用此功能

<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>

我们可以在复选框被选中时设置值 Yes 而在未选中时设置 No

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

angular

Stackblitz