Question

我尝试使用Ionic 3中的嵌套表格概念制作反应式表格。但是出现错误：

“无法读取未定义的属性”控件”。

如果有人能解决我的问题，那将是一件好事。我试图通过注释不同的输入选项卡来解决此问题，但是它不起作用。

 <form [formGroup]="customerForm" (ngSubmit)="book(customerForm.value)"  >
    <ion-card>
        <ion-card-header>
            Contact details
            <ion-label class="details">Your ticket will be sent to these details</ion-label>
        </ion-card-header>
        <ion-item>
            <ion-label color="primary" stacked>Email</ion-label>
            <ion-input type="email" formControlName="email" placeholder="Email" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label color="primary" stacked>Mobile Number</ion-label>
            <ion-input type="text" formControlName="mobnumber" placeholder="Mobile Number"></ion-input> 
        </ion-item>
    </ion-card>
    <ion-card formArrayName="customer" *ngFor="let child of customerForm.controls.customer.controls; let i = index"  [formGroupName]="i"> 
        <ion-card-header>{{'passanger.Passenger detail' | translate}}</ion-card-header>
        <ion-card-content>
            <ion-item>
                <ion-label color="primary" stacked>{{'passanger.Name of the Passenger' | translate}}</ion-label>
                <ion-input type="text" formControlName="name" placeholder="{{'Passenger Name' | translate}}"></ion-input>
                <div class="fma-field error">
                    <p class="valid-p" *ngIf="customerForm.controls.customer_name.errors?.required && customerForm.controls.customer_name.touched">Sorry, field Passanger name is required!</p>
                </div>
            </ion-item>
            <ion-item>
                <ion-label color="primary" stacked>{{'passanger.Age' | translate}}</ion-label>
                <ion-input type="number" formControlName="age" placeholder="{{'Passenger Age' | translate}}"></ion-input>
                <!-- <div class="fma-field error">
                    <p class="valid-p" ngIf="customerForm.controls.age.hasError('required') && signup.controls.mobile.touched">Sorry, field Age name is required!</p>
                </div> -->
            </ion-item>
            <ion-row radio-group   formControlName="gender">
                <ion-col col-6>
                    <ion-label>{{'passanger.Male' | translate}}</ion-label>
                    <ion-radio value="Male" ></ion-radio>
                </ion-col>
                <ion-col col-6>
                    <ion-label>{{'passanger.Female' | translate}}</ion-label>
                    <ion-radio value="Female" ></ion-radio>
                </ion-col>
            </ion-row>
        </ion-card-content>
    </ion-card><br>
    <button ion-button class="widthFull m0 done_btn" >{{'passanger.Book' | translate}}</button>
</form>

这是我的TS文件：

import { Component } from '@angular/core';
import {Validators, FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { IonicPage, NavController, NavParams, ModalController, Events } from 'ionic-angular';

import { Myservice } from "./../../providers/services/myservice";
import { Storage } from '@ionic/storage';
import { TranslateService } from '@ngx-translate/core';



@IonicPage()
@Component({
  selector: 'page-passengerdetail',
  templateUrl: 'passengerdetail.html',
})
export class PassengerdetailPage {
 passingdata:any;
  bookingdata:any;
  mobnumPattern = '^((\\+?)|0)?[0-9]{0,20}$';
  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
  bookData:any
  selectedseats:any;
  droppingpointcode:any;
  boardingpointcode:any;
  operatordata:any;
  searchData:any;
  seatcount :number;
  result:any;
  public customerForm: FormGroup;

  user:any;
  lang: string = 'en';

  constructor(public navCtrl: NavController, public navParams: NavParams,private formBuilder: FormBuilder,public myservice: Myservice, public storage: Storage, public modalCtrl: ModalController,public translate: TranslateService, public events: Events ) 
{

    this.selectedseats = this.navParams.get('selectedseats');


    this.events.subscribe('user:lang', data => {
      setTimeout(() => {
        this.langTrans();
      }, 500);
    })

    this.customerForm = this.formBuilder.group({ 
    'email': ['', Validators.compose([Validators.required, Validators.pattern("[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}")])],
      'mobnumber'  :['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
      'passenger': this.formBuilder.array([])
    })

}

  langTrans(){
    this.storage.get('lang').then(lang => {
      if (lang != null) {
        this.translate.use(lang)
        this.lang = lang;
      }
      else {
        this.translate.use('en')
      }
    })
  }


  ionViewDidLoad() {

    this.langTrans();
    this.storage.get('user_data').then(data => {
      console.log(data);
      this.user = data;

    })

    this.patchValues();
   }



  back(){
    this.navCtrl.pop();
  }


  patchValues()
{
  const control = <FormArray>this.customerForm.controls['customer'];
  var This = this;
   var passengerCount = this.selectedseats.length;
 let passenger_details;

  for (let i = 0; i < passengerCount; i++) 
  {
     passenger_details= {

          'name': [null, Validators.compose([Validators.required])],

          'age' : [null, Validators.compose([Validators.required])],
          'gender': ['Male',Validators.compose([Validators.required ])]

        };

    control.push(this.formBuilder.group(passenger_details));

  }

}


  book(value)
  {
   console.log('Value', value);
  }
}

Selectedseats来自上一页，在这里效果很好。问题与表格有关。我试图在控制台中打印书籍（值），但是由于html中的错误而无法使用。

Answer 1

现在您在表单声明中没有“ customer_name”字段，因此添加此内容。

this.customerForm = this.formBuilder.group({
    'customer_name': ['']   
  })

此外，您需要在该字段中使用吸气剂。

get customer_name() { return this.customerForm.get('customer_name'); }

在模板中使用

<div *ngIf="customer_name.errors.errorType">

Answer 2

未定义的控件，因为未创建FormGroup属性，也未创建FormArray。
您可以尝试以下代码
html文件

<ion-card formArrayName="customer" > 
  <ion-card-header>{{'passanger.Passenger detail' | translate}}</ion-card-header>
  <ion-card-content *ngFor="let child of customerForm.get('customer').controls; let i = index" [formGroupName]="i">
    <ion-item>
      <ion-label color="primary" stacked>{{'passanger.Name of the Passenger' | translate}}</ion-label>
      <ion-input type="text" formControlName="name" placeholder="{{'Passenger Name' | translate}}"></ion-input>                
    </ion-item>
    <ion-item>
      <ion-label color="primary" stacked>{{'passanger.Age' | translate}}</ion-label>
      <ion-input type="number" formControlName="age" placeholder="{{'Passenger Age' | translate}}"></ion-input>
    </ion-item>
    <ion-row radio-group   formControlName="gender">
      <ion-col col-6>
          <ion-label>{{'passanger.Male' | translate}}</ion-label>
          <ion-radio value="Male" ></ion-radio>
      </ion-col>
      <ion-col col-6>
          <ion-label>{{'passanger.Female' | translate}}</ion-label>
          <ion-radio value="Female" ></ion-radio>
      </ion-col>
    </ion-row>
  </ion-card-content>
</ion-card>

component.ts文件

patchValues(){    
  this.customerForm.addControl('customer',new FormArray([]));
  (<FormArray>this.customerForm.controls['customer']).push(
    new FormGroup({
      name: new FormControl('', Validators.required),
      age: new FormControl(null, Validators.required),
      gender: new FormControl("Male", Validators.required)
    })
  )      
  console.log(this.customerForm);
}

我在patchValue函数中删除了一些代码。我不知道离子您可以只实现这些逻辑并运行您的代码。效果很好

无法读取反应形式中未定义的属性“控件”

2 个答案: