我正在创建一个联系人的形式，我添加了一些复选框。用户可以选择多个选项，并应选择至少1个框。我需要通过所有选定的复选框到API数据，但我不知道如何设置它在。html文件。component.html
<div class="col-md-12 col-12 mb-5">
<div class="heading-layout3">
<h3 class="mg-b-10">Please Choose Your Service:</h3>
</div>
<article class="feature1 col-md-4 col-sm-6 p-0">
<input type="checkbox" id="feature1" name="floor"/>
<div>
<span> Floor Maintenance </span>
</div>
</article>
<article class="feature2 col-md-4 col-sm-6 p-0">
<input type="checkbox" id="feature2" name="deep"/>
<div>
<span> Deep Cleaning </span>
</div>
</article>
<article class="feature3 col-md-4 col-sm-6 p-0">
<input type="checkbox" id="feature3" name="residential"/>
<div>
<span> Residential Cleaning </span>
</div>
</article>
<article class="feature4 col-md-4 col-sm-6 p-0">
<input type="checkbox" id="feature4" name="commercial"/>
<div>
<span> Commercial Cleaning </span>
</div>
</article>
<article class="feature5 col-md-4 col-sm-6 p-0">
<input type="checkbox" id="feature5" name="industrial"/>
<div>
<span> Industrial Cleaning </span>
</div>
</article>
<article class="feature6 col-md-4 col-sm-6 p-0">
<input type="checkbox" id="feature6" name="sanitization"/>
<div>
<span> Sanitization Services </span>
</div>
</article>
</div>component.ts
export class ContactComponent {
contactForm!: FormGroup;
get name() {
return this.contactForm.controls['name'];
}
get email() {
return this.contactForm.controls['email'];
}
get phone() {
return this.contactForm.controls['phone'];
}
get services() {
return this.contactForm.controls['services'];
}
get message() {
return this.contactForm.controls['message'];
}
constructor(private fb: FormBuilder, private _emailService: EmailService) {
}
ngOnInit(): void {
this.contactForm = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.minLength(3)]],
phone: ['', [Validators.required, Validators.minLength(3)]],
message: ['', [Validators.required, Validators.minLength(3)]],
services: this.fb.group({
floor: ['Floor Maintenance'],
deep: ['Deep Cleaning'],
residential: ['Residential Cleaning'],
commercial: ['Commercial Cleaning'],
industrial: ['Industrial Cleaning'],
sanitization: ['Disinfectant and Sanitization']
}, [Validators.required])
})
}
}如何将复选框数据传递给API？
1条答案
按热度按时间5m1hhzi41#
要让用户选择至少一个复选框，您可以为您的表单组创建一个名为service的自定义验证程序。
要在另一个文件中创建自定义验证器，可以添加：
则将其替换为
{ validators: requireCheckboxesToBeCheckedValidator() }，而不是添加[Validors.required]您的ngOninit应该如下所示：
}