Formgroup无法检索用户输入的值，并且无法在提交表单IONIC 5时重新加载页面

如何解决Formgroup无法检索用户输入的值，并且无法在提交表单IONIC 5时重新加载页面

在尝试问这个问题之前，我已经尝试过搜索，但似乎目前尚无答案。我的问题是我尝试使用ionic 5实现登录页面（我是该框架的初学者），我认为一切都很好，但是当我单击创建用户时，formgroup无法检索用户输入的值并重新加载页面但是我从来没有为此编写代码。

这是我的代码（sign.in.page.ts）

import { UserService } from './../user.service';
import { User } from './../models/user';
import { Component,OnInit } from '@angular/core';
import { FormBuilder,FormGroup,Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-sign-in',templateUrl: './sign-in.page.html',styleUrls: ['./sign-in.page.scss'],})
export class SignInPage implements OnInit {

  public loginForm: FormGroup;
  public user: User;

  constructor(public fb: FormBuilder,public userSevice: UserService,public router: Router) {

  }

  ngOnInit() {
    this.loginForm = this.fb.group({
      login: ['',Validators.required],email: ['',password: ['',confirmedPassword: ['',Validators.required]
    });
  }

  saveUser() {
    console.log("saveUserCalled");
    console.log(this.loginForm.value);

    this.user.login = this.loginForm.value.login;
    this.user.eMail = this.loginForm.value.email;
    this.user.password = this.loginForm.value.confirmedPassword;
    console.log(this.loginForm.value);
    this.userSevice.saveUser(this.user).subscribe(data => {
      console.log(data);
    });
    this.router.navigateByUrl('/tabs');
  }

}

，这是登录代码。page.html

<img src="../../assets/logo_main.png" alt="">
<ion-content>
  <form [formGroup]="loginForm" >
    <ion-item lines="full">
      <ion-label position="floating">Login</ion-label>
      <ion-input type="text"  formControlName="login"></ion-input>
    </ion-item>

    <ion-item lines="full">
      <ion-label position="floating">Email</ion-label>
      <ion-input type="text"  formControlName="email"></ion-input>
    </ion-item>

    <ion-item lines="full">
      <ion-label position="floating">Mot de passe</ion-label>
      <ion-input type="password"  formControlName="password"></ion-input>
    </ion-item>

    <ion-item lines="full">
      <ion-label position="floating">Confirmation du mot de passe</ion-label>
      <ion-input type="password"  formControlName="confirmedPassword"></ion-input>
    </ion-item>   
    <ion-row>
      <ion-col>
        <ion-button type="submit" color="danger" expand="block" (click)="saveUser()" >Créer un compte</ion-button>       
      </ion-col>
    </ion-row>
  </form>
</ion-content>

我不明白为什么它不起作用，我在角度上也一样，而且效果很好..

谢谢。

米尔顿

解决方法

因此，在您的情况下，您将user声明为一种类型，但由于从未使用任何值实例化它，因此它保持“未定义”状态。因此，您将收到类型错误。

因此，在ngOnInit内部，应使用初始值初始化用户：

this.user = {
      login: null,email: null,password: null
}

或更好地将值分配为对象而不是每个属性：

this.user = {
      login: this.loginForm.value.login,email: this.loginForm.value.email,password: this.loginForm.value.confirmedPassword
    }

如我根据您的代码https://stackblitz.com/edit/ionic-angular-v5-q62gpm

创建的这个stackblitz示例中所示，该表单应该可以正常工作