Question

我为我的学校项目编写了一个程序，我不知道为什么console.log()总是返回undefined。

<ion-header>
  <ion-navbar>
<button ion-button menuToggle>
  <ion-icon name="menu"></ion-icon>
</button>
<ion-title>Registration Page</ion-title>
</ion-navbar>
</ion-header>


<ion-content fullscreen style="background-color:#e5dede;">

<div style="margin-left:25%;margin-right:25%;align-self:center;align-items:center; align-content:center">

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">

    <ion-row>
      <ion-col>
        <ion-item [ngClass]="{'error-border':!myForm.controls.username1.valid && myForm.controls.username1.touched}">
            <ion-label floating>Username</ion-label>
          <ion-input formControlName="username1" type="text"></ion-input>
        </ion-item>
        <ion-item *ngIf="myForm.controls.username1.hasError('required') && myForm.controls.username1.touched">
          <p>Username field is required ! Enter a username</p>
        </ion-item>
        <!-- <ion-item *ngIf="myForm.controls.username.hasError('pattern') && myForm.controls.username.touched">
          <p>Invalid Format, Make sure you have Number , Small and Capital Letter </p>
        </ion-item> -->
        <ion-item *ngIf="myForm.controls.username1.hasError('minLength') && myForm.controls.username1.touched">
          <p>Minimum length for Username is 8 Character !</p>
        </ion-item>
        <ion-item *ngIf="myForm.controls.username1.hasError('maxlength') && myForm.controls.username1.touched">
          <p>Maximum length for Username is 20 Character !</p>
        </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <ion-item [ngClass]="{'error-border':!myForm.controls.password1.valid && myForm.controls.password1.touched}">
            <ion-label floating>Password</ion-label>
          <ion-input formControlName="password1" type="password"></ion-input>
        </ion-item>
        <ion-item *ngIf="myForm.controls.password1.hasError('required') && myForm.controls.password1.touched">
          <p>Password field is required ! Enter a password</p>
        </ion-item>
        <ion-item *ngIf="myForm.controls.password1.hasError('minlength') && myForm.controls.password1.touched">
          <p>Minimum length for password length is 8 !</p>
        </ion-item>
        <ion-item *ngIf="myForm.controls.password1.hasError('maxlength') && myForm.controls.password1.touched">
          <p>Maximum length for password is 20 Character !</p>
        </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <ion-item [ngClass]="{'error-border':!myForm.controls.name.valid && myForm.controls.name.touched}">
            <ion-label floating>Name</ion-label>
          <ion-input formControlName="name" type="text"></ion-input>
         </ion-item>
         <ion-item *ngIf="myForm.controls.name.hasError('pattern') && myForm.controls.name.touched">
           <p>Only alphabet is allowed !</p>
         </ion-item>
         <ion-item *ngIf="myForm.controls.name.hasError('required') && myForm.controls.name.touched">
           <p>Name field is required ! Enter a name</p>
         </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <ion-item [ngClass]="{'error-border':!myForm.controls.telephone.valid && myForm.controls.telephone.touched}">
          <ion-label floating>Contact</ion-label>
          <ion-input maxlength="11" type="tel" formControlName="telephone" text-right></ion-input>
        </ion-item>
        <ion-item *ngIf="myForm.controls.telephone.hasError('required') && myForm.controls.telephone.touched">
          <p>Contact Field is Required !! </p>
        </ion-item>
        <ion-item *ngIf="myForm.controls.telephone.hasError('pattern') && myForm.controls.telephone.touched">
          <p>Only Number is Allowed !! </p>
        </ion-item>
        <ion-item *ngIf="myForm.controls.telephone.hasError('minlength') && myForm.controls.telephone.touched">
          <p>Telephone Number is Invalid !! </p>
        </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col col-4>
      </ion-col>
        <ion-col col-4>
          <button ion-button full round class="btnLoginPage" color="secondary" type="submit">Register</button>
        </ion-col>
        <ion-col col-4>
        </ion-col>
      </ion-row>
</form>

里面的打字稿我有这个..

@IonicPage()
@Component({
selector: 'page-register',
templateUrl: 'register.html',
})
export class RegisterPage {

myForm: FormGroup;

  public username1: any;
  public password1: any;
  public name: any;
  public telephone: any;
  public id: any;
  public id1: any;


 constructor(public navCtrl: NavController, public navParams: NavParams, 
public formBuilder: FormBuilder) {

this.myForm = formBuilder.group({
  username1: ['', Validators.compose([Validators.required, Validators.pattern('[a-zA-Z0-9]*'), Validators.minLength(8), Validators.maxLength(20)])],
  password1: ['', Validators.compose([Validators.required, Validators.pattern('[a-z0-9]*'), Validators.minLength(8), Validators.maxLength(20)])],
  telephone: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.pattern('[0-9]*'), Validators.maxLength(11)])],
  name: ['', Validators.compose([Validators.required, Validators.pattern('[a-zA-Z]*')])],
});

// this.authForm = formBuilder.group({
//   username:['', Validators.compose([Validators.maxLength(20), Validators.pattern('[a-z]*'), Validators.required])],
//   password: ['', Validators.compose([Validators.maxLength(20), Validators.pattern('[a-zA-Z]*'), Validators.required])],
//   name: ['',Validators.compose([Validators.maxLength(50), Validators.required,Validators.pattern('[a-zA-Z]*')])],
//   telNum: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]*')])],
// })

  }

  ionViewDidLoad() {
  console.log('ionViewDidLoad RegisterPage');
  }

  reset() {
   this.myForm.reset();
  }

  trySubmit(): void {
    console.log("id here" + this.username1);
  }

  try() {

let id1 = this.username1;
let pass = this.password1;
let realName = this.name;
let contact = this.telephone;

console.log("id", id1, pass, realName, contact);
  }

  onSubmit(value: any): void {

console.log("username", this.username1, "password", this.password1, "name", 
this.name, "tel", this.telephone);

  }
}

我把2个函数放在这里1是ionChange而另一个是ngSubmit，在控制台内我得到相同的结果，“未定义”。

直到现在我还没有想到我的代码发生了什么，我以前在它没有问题之前用过console.log（），请问这里有什么问题？谢谢

未定义错误：

Answer 1

好吧，您的问题是您正在记录RegisterPage（username1，password1 ...）的属性，但是，如果您修改代码，那么这些变量永远不会分配给什么，所以他们总是undefined。

表单中存储的值位于FormGroup属性myForm中。因此，您必须console.log(this.username1)而不是console.log(this.myForm.get('username1').value)。

事实上，您可以删除RegisterPage中的所有这些属性，因为您已将它们分组到myForm。

如果您希望控件的值绑定到组件的属性，最好使用ngModel（https://angular.io/guide/forms）

我的离子console.log（）变量总是返回undefined

1 个答案: