Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 需要离子3表单组的帮助,无法读取未定义的属性get_Angular_Typescript_Ionic Framework - Fatal编程技术网

Angular 需要离子3表单组的帮助,无法读取未定义的属性get

Angular 需要离子3表单组的帮助,无法读取未定义的属性get,angular,typescript,ionic-framework,Angular,Typescript,Ionic Framework,我刚刚制作了一个注册表表单,我曾经在Angular 5中使用form Group,但在Ionic 3中,我得到了以下错误: 1-无法读取未定义的属性“get” 2-错误错误:未捕获(承诺中):错误:formGroup需要一个formGroup 例如。请把一个传进来 Example: <div [formGroup]="myGroup"> <input formControlName="firstName"> </div> In your cla

我刚刚制作了一个注册表表单,我曾经在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()
});
示例:
在你们班:
this.myGroup=newformgroup({
名字:newformcontrol()
});
我的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);
}
从'@angular/forms'导入{Validators,FormBuilder,FormGroup};
注册:FormGroup;
主页=HelloIonicPage;
构造函数(公共navCtrl:NavController,公共navParams:navParams,
私有创建:UsersData,私有formBuilder:formBuilder){
}
ionViewDidLoad(){
this.InitUserForm();
log('IonViewDidLoadLoginPage');
}
InitUserForm(){
让我们用电子邮件发送\[u REGEXP=/^(([^()\[\]\\,;:\s@“]+(\.[^()\[\]\\,;:\s@“]+)*)
(“+”)@(\[[0-9]{1,3}.[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],
名称:[''[Validators.required]],
用户名:['',[Validators.required]],
电子邮件:[''[Validators.required,Validators.pattern(email_REGEXP)],
密码:[''[Validators.required,Validators.minLength(6)]]
})
}
createUser(){
this.create.createUsers(this.register.value);
}
到目前为止,我所尝试的:

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

2-尝试将FormsModule添加到应用程序模块

3-我仔细检查了爱奥尼亚表格的文档,他们说的一切我都做了


我需要知道问题出在哪里,是因为我没有添加ngModel吗?当我将formGroup与Angular 5一起使用时,我从不使用它。

您需要按照以下模式更改.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};
    }
  }

请检查一下。我解决了这个错误。如果有效,请给我accept勾号。好的,我现在会检查我尝试了您的解决方案,现在向我显示:模块“AppModule”导入的意外值“setupDeepLinker”。请添加@NgModule注释。