首页 文章

需要Ionic 3表格组的帮助，无法读取未定义的属性

提问于
浏览 次
1

我刚刚创建了一个注册表单，我曾经在Angular 5中使用Form-Group，但是使用Ionic 3我会收到以下错误：

1-无法读取未定义的属性'get' .

2-错误错误：未捕获（在承诺中）：错误：formGroup需要一个FormGroup实例 . 请通过一个 .

Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

我的HTML：

<ion-list>
  <form [formGroup]="register" (ngSubmit)="createUser()">
  <ion-item class="form-group" padding>
    <ion-label color="primary" floating>Name</ion-label>
    <ion-input formControlName="name" class="form-control" type="text">
    </ion-input>
  </ion-item>
  <ion-item class="form-group" padding>
    <ion-label color="primary" floating>User Name</ion-label>
    <ion-input formControlName="userName" class="form-control" type="text"> 
    </ion-input>
   </ion-item>
   <ion-item class="form-group" padding>
    <ion-label color="primary" floating>Email</ion-label>
    <ion-input formControlName="email" class="form-control" type="text"> 
    </ion-input>
   </ion-item>
   <ion-item padding class="form-group">
    <ion-label color="primary" floating>Password</ion-label>
    <ion-input formControlName="password" class="form-control" 
    type="password"></ion-input>
    </ion-item>
    <button type="submit" [disabled]="!register.valid" ion-button 
    color="primary" clear icon-start>
    <ion-icon name="contact"></ion-icon> Submit user</button>
  </form>
</ion-list>

我的TS：

import { Validators, FormBuilder, FormGroup } from '@angular/forms';

register: FormGroup;
homePage = HelloIonicPage;
constructor(public navCtrl: NavController, public navParams: NavParams, 
private create: UsersData, private formBuilder: FormBuilder) {
}
ionViewDidLoad() {
this.InitUserForm();
console.log('ionViewDidLoad LoginPage');
}
InitUserForm() {
let EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)| 
(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0- 
9]+\.)+[a-zA-Z]{2,}))$/;
this.register = this.formBuilder.group({
  id: [0],
  name: ['', [Validators.required]],
  userName: ['', [Validators.required]],
  email: ['', [Validators.required, Validators.pattern(EMAIL_REGEXP)]],
  password: ['', [Validators.required, Validators.minLength(6)]]
})
}
createUser() {
this.create.createUsers(this.register.value);
}

到目前为止我尝试了什么：

1-尝试从离子输入切换到正常输入标签 .

2-尝试将FormsModule添加到app模块 .

3-我仔细检查了Ionic Forms的文档，并做了他们所说的一切 .

我需要知道问题出在哪里，是因为我没有添加ngModel？当我使用带有Angular 5的formGroup时，我从不使用它 .

angular typescript ionic-framework

1 回答

  • 1

    您需要以下列模式更改 .ts 文件

    导入以下包：

    import { Validators, FormBuilder, FormGroup,FormControl } from '@angular/forms';

    然后在课堂内改变

    private register: FormGroup;
constructor(public navCtrl: NavController, public navParams: NavParams, 
private create: UsersData, private formBuilder: FormBuilder) {
   this.InitUserForm();
}

  InitUserForm() {

    this.register = this.formBuilder.group({
      id: [0],
      name: ['', [Validators.required]],
      userName: ['', [Validators.required]],
      email: ['', [Validators.required, this.emailValidator.bind(this)]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    })
  }

  createUser() {
    console.log(this.register.value);
  this.create.createUsers(this.register.value);
}

  emailValidator(control: FormControl): {[s: string]: boolean} {
    if (!control.value.match("^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$")) {
      return {invalidEmail: true};
    }
  }
    回复于

相关问题