1

我创建了一个表单，它在角度中使用离子复选框，当勾选时将“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', 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']);
  });

}
}
4

1 回答 1

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

这行不通。因为我认为interestedin只是FormControl你的一个coachingformFormGroup。

您需要FormArray用于处理数组。

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

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, {
        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);
于 2021-04-07T20:48:29.247 回答