使用字符串值而不是布尔值 true/false 切换 Angular 复选框
Toggle Angular checkbox with string values instead of boolean true/false
我必须在我的表单中创建三个复选框,它们的值需要切换为“optin”和“optout”(字符串),因为我 check/uncheck 复选框。我还需要默认选中所有复选框的“optin”值。我想不出任何解决方案,非常感谢任何帮助:( 因为我对 angular
还很陌生
这是我正在处理的代码
component.html
<form [formGroup]="optOutForm" (ngSubmit)="submitOptFormValue()">
<div class="form-group">
<input type="checkbox" formControlName="optOutFlag1" id="privacy" aria-labelledby="check1">
<label for="privacy" id="check1"> Checkbox 1</label><br><br>
<input type="checkbox" formControlName="optOutFlag2" id="security" aria-labelledby="check2">
<label for="security" id="check2"> Checkbox 2</label><br><br>
<input type="checkbox" formControlName="optOutFlag3" id="consent" aria-labelledby="check3">
<label for="consent" id="check3"> Checkbox 3</label><br><br>
<button> Submit Preference </button>
</div>
</form>
component.ts 文件
optOutForm:FormGroup
this.optOutForm=this.fb.group({
optOutFlag1:["optin",Validators.required],
optOutFlag2:["optin",Validators.required],
optOutFlag3:["optin",Validators.required]
});
对于复选框,Angular 表单控件值绑定到“选中”状态(而不是“值”属性),因此它应该是 true
或 false
.
此外,您正在混合反应形式和 template-driven 形式。您可能应该做其中之一。
Template-Driven表格
如果您想使用 template-driven 表单,您可以像这样更改您的模板:
...
<form name="optOutForm" (ngSubmit)="onSubmit()" #f="ngForm">
<div>
<input type="checkbox" name="privacyOptIn" id="privacyOptIn"
[(ngModel)]="optIn.privacy" required>
<label for="privacyOptIn">Privacy</label>
</div>
<div>
<input type="checkbox" name="securityOptIn" id="securityOptIn"
[(ngModel)]="optIn.security" required>
<label for="securityOptIn">Security</label>
</div>
<div>
<input type="checkbox" name="consentOptIn" id="consentOptIn"
[(ngModel)]="optIn.consent" required>
<label for="consentOptIn">Consent</label>
</div>
<button>Submit Preference</button>
</form>
...
让你的组件像这样。请注意,模型 optIn
的属性全部设置为 true
,因此默认情况下会勾选复选框。
export class MyComponent {
optIn: {
privacy: boolean;
security: boolean;
consent: boolean;
} = {
privacy: true,
security: true,
consent: true
};
onSubmit() {
...
}
}
反应形式
但是,如果您想采用反应式形式,可以像这样更改您的模板:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div>
<input type="checkbox" formControlName="privacyOptIn" id="privacyOptIn">
<label for="privacy">Privacy</label>
</div>
<div>
<input type="checkbox" formControlName="securityOptIn" id="securityOptIn">
<label for="security">Security</label>
</div>
<div>
<input type="checkbox" formControlName="consentOptIn" id="consentOptIn">
<label for="consent">Consent</label>
</div>
<button>Submit Preference</button>
</form>
然后你可以像这样在你的组件中设置表单:
export class MyComponent implements OnInit {
form: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
privacyOptIn: [true, Validators.required],
securityOptIn: [true, Validators.required],
consentOptIn: [true, Validators.required]
});
}
// Convenience getter for easy access to form fields
get f() { return this.form.controls; }
onSubmit() {
...
}
}
更新
如果你想让你的组件成为return/emit 'optin'
或 'optout'
字符串,你可以简单地在表单提交时在组件中引入一个新的变量:
export class MyComponent {
@Output() options = new EventEmitter<{
privacy: string;
security: string;
consent: string;
}>();
...
onSubmit() {
const emittedOptions = {
privacy: this.optIn.privacy ? 'optin' : 'optout',
security: this.optIn.security ? 'optin' : 'optout',
consent: this.optIn.consent ? 'optin' : 'optout',
}
this.options.emit(emittedOptions);
}
此解决方案基于 solution link by Eliseo。
复选框在 checked/unchecked 时将值切换为“optin”或“optout”,并在 .ts 文件中默认初始化为“optin”
component.html 文件
<form [formGroup]="optOutForm" (ngSubmit)="submitOptFormValue()">
<div class="form-group">
<div class="optClass">
<input type="checkbox"
[ngModel]="optOutForm.get('optOutFlag1')?.value==='optin'"
(ngModelChange)="optOutForm.get('optOutFlag1').setValue($event?'optin':'optout')"
[ngModelOptions]="{standalone:true}" id="privacy">
<label "for="privacy" id="check1">Checkbox 1</label>
</div>
<div class="optClass">
<input type="checkbox"
[ngModel]="optOutForm.get('optOutFlag2')?.value==='optin'"
(ngModelChange)="optOutForm.get('optOutFlag2').setValue($event?'optin':'optout')"
[ngModelOptions]="{standalone:true}" id="security">
<label "for="security" id="check1">Checkbox 2</label>
</div>
<div class="optClass">
<input type="checkbox"
[ngModel]="optOutForm.get('optOutFlag3')?.value==='optin'"
(ngModelChange)="optOutForm.get('optOutFlag3').setValue($event?'optin':'optout')"
[ngModelOptions]="{standalone:true}" id="consent">
<label "for="consent" id="check1">Checkbox 3</label>
</div>
</div>
</form>
component.ts 文件
optOutForm:FormGroup
constructor(private fb:FormBuilder){}
ngOnInit(){
this.optOutForm=this.fb.group({
optOutFlag1:['optin',Validators.required],
optOutFlag2:['optin',Validators.required],
optOutFlag3:['optin',Validators.required]
});
}
我必须在我的表单中创建三个复选框,它们的值需要切换为“optin”和“optout”(字符串),因为我 check/uncheck 复选框。我还需要默认选中所有复选框的“optin”值。我想不出任何解决方案,非常感谢任何帮助:( 因为我对 angular
还很陌生这是我正在处理的代码
component.html
<form [formGroup]="optOutForm" (ngSubmit)="submitOptFormValue()">
<div class="form-group">
<input type="checkbox" formControlName="optOutFlag1" id="privacy" aria-labelledby="check1">
<label for="privacy" id="check1"> Checkbox 1</label><br><br>
<input type="checkbox" formControlName="optOutFlag2" id="security" aria-labelledby="check2">
<label for="security" id="check2"> Checkbox 2</label><br><br>
<input type="checkbox" formControlName="optOutFlag3" id="consent" aria-labelledby="check3">
<label for="consent" id="check3"> Checkbox 3</label><br><br>
<button> Submit Preference </button>
</div>
</form>
component.ts 文件
optOutForm:FormGroup
this.optOutForm=this.fb.group({
optOutFlag1:["optin",Validators.required],
optOutFlag2:["optin",Validators.required],
optOutFlag3:["optin",Validators.required]
});
对于复选框,Angular 表单控件值绑定到“选中”状态(而不是“值”属性),因此它应该是 true
或 false
.
此外,您正在混合反应形式和 template-driven 形式。您可能应该做其中之一。
Template-Driven表格
如果您想使用 template-driven 表单,您可以像这样更改您的模板:
...
<form name="optOutForm" (ngSubmit)="onSubmit()" #f="ngForm">
<div>
<input type="checkbox" name="privacyOptIn" id="privacyOptIn"
[(ngModel)]="optIn.privacy" required>
<label for="privacyOptIn">Privacy</label>
</div>
<div>
<input type="checkbox" name="securityOptIn" id="securityOptIn"
[(ngModel)]="optIn.security" required>
<label for="securityOptIn">Security</label>
</div>
<div>
<input type="checkbox" name="consentOptIn" id="consentOptIn"
[(ngModel)]="optIn.consent" required>
<label for="consentOptIn">Consent</label>
</div>
<button>Submit Preference</button>
</form>
...
让你的组件像这样。请注意,模型 optIn
的属性全部设置为 true
,因此默认情况下会勾选复选框。
export class MyComponent {
optIn: {
privacy: boolean;
security: boolean;
consent: boolean;
} = {
privacy: true,
security: true,
consent: true
};
onSubmit() {
...
}
}
反应形式
但是,如果您想采用反应式形式,可以像这样更改您的模板:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div>
<input type="checkbox" formControlName="privacyOptIn" id="privacyOptIn">
<label for="privacy">Privacy</label>
</div>
<div>
<input type="checkbox" formControlName="securityOptIn" id="securityOptIn">
<label for="security">Security</label>
</div>
<div>
<input type="checkbox" formControlName="consentOptIn" id="consentOptIn">
<label for="consent">Consent</label>
</div>
<button>Submit Preference</button>
</form>
然后你可以像这样在你的组件中设置表单:
export class MyComponent implements OnInit {
form: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
privacyOptIn: [true, Validators.required],
securityOptIn: [true, Validators.required],
consentOptIn: [true, Validators.required]
});
}
// Convenience getter for easy access to form fields
get f() { return this.form.controls; }
onSubmit() {
...
}
}
更新
如果你想让你的组件成为return/emit 'optin'
或 'optout'
字符串,你可以简单地在表单提交时在组件中引入一个新的变量:
export class MyComponent {
@Output() options = new EventEmitter<{
privacy: string;
security: string;
consent: string;
}>();
...
onSubmit() {
const emittedOptions = {
privacy: this.optIn.privacy ? 'optin' : 'optout',
security: this.optIn.security ? 'optin' : 'optout',
consent: this.optIn.consent ? 'optin' : 'optout',
}
this.options.emit(emittedOptions);
}
此解决方案基于 solution link by Eliseo。
复选框在 checked/unchecked 时将值切换为“optin”或“optout”,并在 .ts 文件中默认初始化为“optin”
component.html 文件
<form [formGroup]="optOutForm" (ngSubmit)="submitOptFormValue()">
<div class="form-group">
<div class="optClass">
<input type="checkbox"
[ngModel]="optOutForm.get('optOutFlag1')?.value==='optin'"
(ngModelChange)="optOutForm.get('optOutFlag1').setValue($event?'optin':'optout')"
[ngModelOptions]="{standalone:true}" id="privacy">
<label "for="privacy" id="check1">Checkbox 1</label>
</div>
<div class="optClass">
<input type="checkbox"
[ngModel]="optOutForm.get('optOutFlag2')?.value==='optin'"
(ngModelChange)="optOutForm.get('optOutFlag2').setValue($event?'optin':'optout')"
[ngModelOptions]="{standalone:true}" id="security">
<label "for="security" id="check1">Checkbox 2</label>
</div>
<div class="optClass">
<input type="checkbox"
[ngModel]="optOutForm.get('optOutFlag3')?.value==='optin'"
(ngModelChange)="optOutForm.get('optOutFlag3').setValue($event?'optin':'optout')"
[ngModelOptions]="{standalone:true}" id="consent">
<label "for="consent" id="check1">Checkbox 3</label>
</div>
</div>
</form>
component.ts 文件
optOutForm:FormGroup
constructor(private fb:FormBuilder){}
ngOnInit(){
this.optOutForm=this.fb.group({
optOutFlag1:['optin',Validators.required],
optOutFlag2:['optin',Validators.required],
optOutFlag3:['optin',Validators.required]
});
}