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

我的想法我是新的角，我试图开发一个角代码，当复选框被选中时，我想设置值为Yes，当它不检查时，我想设置它为No。我没有用ngmodel，我用的是formcontrolname。我将把我的代码留在

下面TScode

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

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

<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(''), });

当你使用垫子复选框时，你可以使用事件change和属性checked

<mat-checkbox (change)="patientPastHistoryForm.get('substanceAbuseAlcohol').setValue( $event.checked ? 'Yes' : 'No')" [checked]="patientPastHistoryForm.get('substanceAbuseAlcohol').value=='Yes'" > Alcohol </mat-checkbox>
说明和个人意见:在一个实际的项目或在一个简单的练习中，使用ControlValueAccesor创建一个自定义表单控件应该只创建一个更复杂的组件，如果只是改变"方面";我认为没有必要的复选框(否则你需要使用这个"特殊复选框")。在几个几个组件中)

注意:是对三个复选框相关的评论的回答-真的应该在另一个问题中-

当我们有关联的树复选框时我们可以这样做

<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"收到一个字符串数组。他循环遍历这个数组，如果所有值都为Yes 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>

Stackblitz

在html

中使用变量是可行的
<mat-checkbox color="primary" (change)=" patientPastHistoryForm.controls['substanceAbuseAlcohol'].setValue( saveValue.checked ? 'Yes' : 'No' ) " #saveValue > Alcohol </mat-checkbox>

Stackblitz

相关内容

最新更新

热门标签：