更改 ion-checkbox 的默认值

问题描述

我创建了一个表单，它在 angular 中使用离子复选框，当勾选时向数据库提交“true”，我如何将框的值提交到数据库，例如在我的列表中是 Junior Groups，所以我希望“初级组”出现在数据库中而不是真的。该表单还会发送一封电子邮件，因此收件人需要知道查询感兴趣的内容。

目前的代码是：

html 表单：

<form [formGroup]="coachingform">
<ion-grid>
<ion-row>
<ion-col>
 <ion-item>
   <ion-label position="start">First Name</ion-label>
   <ion-input type="text" formControlName="firstname"></ion-input>
 </ion-item>
 <ion-item>
   <ion-label position="start">Last Name</ion-label>
   <ion-input type="text" formControlName="surname"></ion-input>
 </ion-item>
 <ion-item>
   <ion-label position="start">Email</ion-label>
   <ion-input type="email" formControlName="email"></ion-input>
 </ion-item>
 <ion-item>
  <ion-label position="start">Contact Number</ion-label>
  <ion-input type="tel" formControlName="telnumber"></ion-input>
</ion-item>
<ion-item>
  <ion-label position="start">What city are you based in?</ion-label>
<ion-input type="text" formControlName="location"></ion-input>
</ion-item>
<ion-list>
  <ion-label>What are you interested in?</ion-label>
  <ion-item *ngFor="let entry of form">
    <ion-label>{{entry.val}}</ion-label>
    <ion-checkBox slot="start" formControlName="interestedin"></ion-checkBox>
  </ion-item>
</ion-list>

然后在 .ts 文件中有这样的列表：

export class CoachingenquiryPage implements OnInit {
coachingform: FormGroup
public form = [
{ val: 'Junior Groups',isChecked: true },{ val: 'Adult Groups',{ val: 'Individual Lessons',{ val: 'Holiday Camps',];

任何帮助将不胜感激。非常感谢

更新后的 .ts 代码是：

import { Component,OnInit } from '@angular/core';
import { FormControl,FormBuilder,FormGroup,Validators,FormArray }    
from '@angular/forms'
import { HttpClient,} from '@angular/common/http';
import {  Router } from '@angular/router';

@Component({
selector: 'app-coachingenquiry',templateUrl: './coachingenquiry.page.html',styleUrls: ['./coachingenquiry.page.scss'],})
export class CoachingenquiryPage implements OnInit {
coachingform: FormGroup
public options= [
{ val: 'Junior Groups',];

constructor(private http: HttpClient,public fb: FormBuilder,private   
router: Router) { 
this.coachingform = this.fb.group({
  firstname: [''],surname: [''],email: [''],telnumber: [''],location: [''],interestedTopics: this.fb.array([]),})
const control = this.coachingform.get("interestedTopics") as  
FormArray;
this.options.forEach(f => {
  const group = this.fb.group({
    interestedin: [f.isChecked]
  });
  control.push(group);
});
}

ngOnInit() {
this.coachingform = new FormGroup({
  firstname: new FormControl(null,{
    updateOn: 'blur',validators: [Validators.required]
  }),surname: new FormControl(null,email: new FormControl(null,validators: [Validators.required,Validators.email]
  }),telnumber: new FormControl(null,Validators.pattern('[- +()0-9]  
 {11,}')]
  }),location: new FormControl(null,interestedin: new FormControl(null,})
}
onSubmitForm () {
var formData: any = new FormData();
formData.append("firstname",this.coachingform.get('firstname').value);
formData.append("surname",this.coachingform.get('surname').value);
formData.append("email",this.coachingform.get('email').value);
formData.append("telnumber",this.coachingform.get('telnumber').value);
formData.append("location",this.coachingform.get('location').value);
formData.append("interestedin",this.coachingform.get('interestedin').value);
this.http.post('https://www.parktennis.org/app/services/app-    
coachingenquiry.PHP',formData,{responseType: 'text'}).subscribe(() 
=> {
this.coachingform.reset();
this.router.navigate(['/','landing']);
  });

}
}

解决方法

<ion-checkbox slot="start" formControlName="interestedin"></ion-checkbox>

这行不通。因为我认为 interestedin 只是您的 FormControl FormGroup 的 coachingform。

您需要使用 FormArray 来处理数组。

首先，在您的 coachingform FormGroup 中添加一个“FormArray”，例如：

this.coachingform = this.builder.group({
    firstname: [null],surname: [null],...
    interestedTopics: this.builder.array([])
});

然后，将新控件添加到所有选项的数组中。

const control = this.coachingform.get("interestedTopics") as FormArray;
control.clear();
this.options.forEach(f => {
    const group = this.builder.group({
    interestedin: [f.isChecked],value: [f.val]
});
control.push(group);

注意：为方便起见，我已将您的复选框选项从 form 重命名为 options。

最后，您的 ion-list 将是：

<ion-list formArrayName="interestedTopics">
    <ion-label>What are you interested in?</ion-label>
    <ion-item *ngFor="let entry of options; let i=index" [formGroupName]="i">
        <ion-label>{{entry.val}}</ion-label>
        <ion-checkbox slot="start" formControlName="interestedin"></ion-checkbox>
     </ion-item>
</ion-list>

工作演示在StackBlitz。

结果：

编辑：

从您的 form 中删除 constructor 相关代码。

将您的 ngOnInit() 挂钩更改为：

ngOnInit() {
    this.coachingform = new FormGroup({
      firstname: new FormControl(null,{
        updateOn: "blur",validators: [Validators.required]
      }),surname: new FormControl(null,email: new FormControl(null,validators: [Validators.required,Validators.email]
      }),telnumber: new FormControl(null,Validators.pattern("[- +()0-9]{11,}")]
      }),location: new FormControl(null,interestedTopics: this.builder.array([])
    });
    const control = this.coachingform.get("interestedTopics") as FormArray;
    control.clear();
    this.options.forEach(f => {
      const group = this.builder.group({
        interestedin: [f.isChecked]
      });
      control.push(group);
    });
  }

获取选择选项：

const controlValue = this.coachingform.get("interestedTopics").value;
const selectedOptions = controlValue
    .filter(f => f.interestedin)
    .map(m => m.value);