Question

好吧，对于Ionic（4）/ Angular（7）来说仍然是新手，但是我有两种几乎相同的形式，一种可以正常工作，另一种则不能，并返回错误。我有一个“登录”表格，可以正常工作，并且由于我不愿讨论的原因，我决定为“注册”使用其他表格-因此在“登录”表格中，如果用户需要注册，代码导航至注册页面，并可以选择再次返回。登录表单可以正常工作，但是导航到注册页面会产生错误。我在这里看到了与此有关的其他几个问题，但是没有一个问题可以解决，而一个问题却没有解决，而且大多数情况似乎是由于缺少进口等造成的。也许这也是我的情况，但我觉得很奇怪。我已经搜索了文本，也许我只是错过了一个愚蠢的错字，剪切和过去的错误之类的东西，但是如果是这样，我已经盯着很长时间了，仍然看不到它。

这是有效的登录表单：

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

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

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

        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password" formControlName="Password" ></ion-input>
        </ion-item>

        <ion-button expand="full" type="submit" [disabled]="!credentialsForm.valid">Login</ion-button>
        <ion-button expand="full" type="button" (click)="register()" [disabled]="!credentialsForm.valid">Register</ion-button>
  </form>
</ion-content>

该视图的打字稿：

import { AuthenticationService } from 

'./../../services/authentication.service';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpParams } from '@angular/common/http';
import { UserData } from 'src/app/models/userdata';
import { Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {

  credentialsForm: FormGroup;
  private currentUser: UserData;

  constructor(private formBuilder: FormBuilder,
    private authService: AuthenticationService,
    private router: Router,
    private userService: UserService,
    ) {
      this.currentUser = new UserData();
    }

  ngOnInit() {
    this.credentialsForm = this.formBuilder.group({
      Email: ['', [Validators.required, Validators.email]],
      Password: ['', [Validators.required, Validators.minLength(6)]],
    });
  }


  onSubmit() {
    this.currentUser.Email = this.credentialsForm.value.Email;
    this.currentUser.Password = this.credentialsForm.value.Password;
    this.userService.saveUserStore(this.currentUser, false);
    this.authService.login(this.currentUser);
    this.router.navigate(['menu' , 'dashboard']);
  }



  register() {
    console.log('Going to Register Form');
    this.router.navigate(['register']);
  }
}

这是不起作用的注册表格：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
        <ion-back-button defaultHref="/login"></ion-back-button>
    </ion-buttons>
    <ion-title>Register Page</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content padding>


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

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

  <ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" formControlName="Password" ></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Confirm Password</ion-label>
    <ion-input type="password" formControlName="ConfirmPassword" ></ion-input>
  </ion-item>

  <ion-button expand="full" type="submit" (click)="register()" [disabled]="!registerForm.valid">Register</ion-button>
  <ion-button expand="full" type="button" [disabled]="!registerForm.valid">Login</ion-button>

</form>

</ion-content>

...以及它的Typescript代码：

import { AuthenticationService } from './../../services/authentication.service';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpParams } from '@angular/common/http';
import { UserData } from 'src/app/models/userdata';
import { Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';


@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})

export class RegisterPage implements OnInit {

  registerForm: FormGroup;
  private currentUser: UserData;

  constructor(private formBuilder: FormBuilder,
    private authService: AuthenticationService,
    private router: Router,
    private userService: UserService,
    ) {
      this.currentUser = new UserData();
    }

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      Email: ['', [Validators.required, Validators.email]],
      Password: ['', [Validators.required, Validators.minLength(6)]],
      ConfirmPassword: ['', [Validators.required, Validators.minLength(6)] ]
    });
  }

  onSubmit() {
    this.authService.register(this.registerForm.value).subscribe(() => {
      // Call Login to automatically login the new user
      this.authService.login(this.registerForm.value);
    });
  }

  login() {
    this.router.navigate(['login']);
  }
}

我尝试过的事情：使应用程序模块导入了ReactiveForms模块和FormsModule。（没有任何区别，因此Ive暂时将其注释掉，因为它无需登录页面即可使用）。将注册表单空白（仍然无法正常工作）将注册页面留空，但保留标题（仅用于检查导航），... 这似乎很奇怪，我一直认为我可能在某处进行了剪切和粘贴错误，但是如果这样我看不到它，那么也许是另一双眼睛。非常感谢...

无法绑定到“ formGroup”，因为它不是“ form”的已知属性-works ...并且不会

0 个答案: