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

Question

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

这是我的代码（符号-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: ['', Validators.required],
      password: ['', Validators.required],
      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');
  }

}

这是标志的代码-in.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>

我不明白为什么它不起作用，我对 angular 做了同样的事情并且它工作正常..

谢谢。

米尔顿

Answer 1

因此，在您的情况下，您将 user 声明为一种类型，但它仍然是 'undefined'，因为它永远不会被实例化为任何值。因此您收到了类型错误。

所以在 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
    }

表单应该像我根据您的代码创建的这个 stackblitz 示例中所示那样工作：https://stackblitz.com/edit/ionic-angular-v5-q62gpm

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

Formgroup can't retrieve values of user input and page reload on form submit IONIC 5

ionic-framework

ionic5