时间戳

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

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

问题描述

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

这是我的代码（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: ['', 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');
  }

}

这是 login.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>

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

谢谢。

弥尔顿

标签： ionic-frameworkionic5

解决方案

因此，在您的情况下，您将 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
    }

该表单应该可以在我根据您的代码创建的这个 stackblitz 示例中看到：https ://stackblitz.com/edit/ionic-angular-v5-q62gpm

推荐阅读