更改离子复选框的默认值

Question

我在 angular 中创建了一个使用 ion-checkboxes 的表单，勾选后会向数据库提交“true”，我如何将复选框的值提交给数据库，例如我的列表是 Junior Groups，所以我希望“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', isChecked: true },
{ val: 'Individual Lessons', isChecked: true },
{ val: 'Holiday Camps', isChecked: true },
];

如有任何帮助，我们将不胜感激。非常感谢

更新后的 .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', isChecked: true },
{ val: 'Adult Groups', isChecked: true },
{ val: 'Individual Lessons', isChecked: true },
{ val: 'Holiday Camps', isChecked: true },
];

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, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
  email: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required, Validators.email]
  }),
  telnumber: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required, Validators.pattern('[- +()0-9]  
 {11,}')]
  }),
  location: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
  interestedin: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
  })
}
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']);
  });

}
}

Answer 1

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

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

您需要使用 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。

结果：

编辑：

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

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

ngOnInit() {
    this.coachingform = new FormGroup({
      firstname: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required]
      }),
      surname: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required]
      }),
      email: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required, Validators.email]
      }),
      telnumber: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required, Validators.pattern("[- +()0-9]{11,}")]
      }),
      location: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required]
      }),
      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);

更改离子复选框的默认值

changing default value of ion-checkbox

angular

angular-reactive-forms

ion-checkbox