使用字符串值而不是布尔值true/false切换Angular复选框

Question

我必须在表单中创建三个复选框，它们的值需要切换为"optin"；以及"；optout"；(字符串(。此外，我需要在默认情况下选中"；optin"；价值我无法找到任何解决方案，任何帮助都将不胜感激：(因为我对角度还很陌生

这是我正在上工作的代码

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

Answer 1

使用复选框，Angular表单控件值被绑定到"已检查"；state(而不是"value"属性(，因此它应该是true或false。

此外，您正在混合反应式表单和模板驱动的表单。你可能应该做其中一个。

模板驱动表单

如果你想使用模板驱动的表单，你可以这样更改你的模板：

...
<form name="optOutForm" (ngSubmit)="onSubmit()" #f="ngForm">
<div>
<input type="checkbox" name="privacyOptIn" id="privacyOptIn" 
[(ngModel)]="optIn.privacy" required>&nbsp;
<label for="privacyOptIn">Privacy</label>
</div>
<div>
<input type="checkbox" name="securityOptIn" id="securityOptIn"
[(ngModel)]="optIn.security" required>&nbsp;
<label for="securityOptIn">Security</label>
</div>
<div>
<input type="checkbox" name="consentOptIn" id="consentOptIn"
[(ngModel)]="optIn.consent" required>&nbsp;
<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() {
...
}
}

请参阅此处的Stacklitz示例。

反应形式

然而，如果你想使用反应式表单，你可以这样更改你的模板：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div>
<input type="checkbox" formControlName="privacyOptIn" id="privacyOptIn">&nbsp;
<label for="privacy">Privacy</label>
</div>
<div>
<input type="checkbox" formControlName="securityOptIn" id="securityOptIn">&nbsp;
<label for="security">Security</label>
</div>
<div>
<input type="checkbox" formControlName="consentOptIn" id="consentOptIn">&nbsp;
<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() {
...
}
}

请参阅此处的Stacklitz示例。

更新

如果您希望您的组件返回/发出'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);
}

在这里看它的工作

Answer 2

此解决方案基于Eliseo的解决方案链接。

复选框将值切换为"0"；optin"；或"；optout"；当被检查/未检查时；optin"；默认情况下在.ts文件中

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