angular - RegisterPage.html:57 错误类型错误：无法读取未定义的属性“有效”（离子 4）

问题描述

尝试访问注册页面时出现此错误...登录页面时产生错误我尝试访问页面进行注册错误：

RegisterPage.html:57 ERROR TypeError: Cannot read property 'valid' of undefined

我的 register.component.html

    <form [formGroup]="registerForm" (submit)="register()">
      <ion-col>
        <ion-item class="boder-input">
          <ion-label position="floating">
            <ion-icon name="contact"></ion-icon> Nome
          </ion-label>
          <ion-input type="text" formControlName="name"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item class="boder-input">
          <ion-label position="floating">
            <ion-icon name="mail"></ion-icon> Email
          </ion-label>
          <ion-input type="email" formControlName="email"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item class="boder-input">
          <ion-label position="floating">
            <ion-icon name="logo-github"></ion-icon> Git
          </ion-label>
          <ion-input type="text" formControlName="git"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item class="boder-input">
          <ion-label position="floating">
            <ion-icon name="key"></ion-icon> Senha
          </ion-label>
          <ion-input type="password" formControlName="password"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item class="boder-input">
          <ion-label position="floating">
            <ion-icon name="key"></ion-icon> Confirmar senha
          </ion-label>
          <ion-input type="password" formControlName="pass"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-button type="submit" color="primary" [disabled]="!form.valid" expand="block">Cadastrar</ion-button>
      </ion-col>
    </form>

我的 register.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
import { resolve } from 'url';

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

  registerForm: FormGroup;

  constructor(private formBuild: FormBuilder, private authService: AuthService, private router: Router) { }

  ngOnInit() {
    this.registerForm = this.formBuild.group({
      email: [' ', [Validators.required, Validators.email]],
      password: [' ', Validators.required],
      pass: [' ', Validators.required],
      name: [' ', Validators.required],
      git: [' ', Validators.required],
    });
  }

  register() {
    const nome = this.registerForm.get('name').value;
    const email = this.registerForm.get('email').value;
    const password = this.registerForm.get('password').value;
    const confPass = this.registerForm.get('pass').value;
    const git = this.registerForm.get('git').value;
    const gitData = this.getDev(git);
    gitData.then(dados => {
      this.authService.register(nome, email, password, confPass, git,
        dados.html_url, dados.avatar_url, dados.followers, dados.following).subscribe(
          (data: any) => {
            return this.router.navigate(['']);
          },
          erro => {
            this.handleError(erro);
          }
        );

    });
  }

  async getDev(git: string) {
    const url = 'https://api.github.com/users/' + git;
    const resp = await fetch(url);
    const json = await resp.json();
    return json;
  }

  handleError(erro) {

  }
}

我的 register.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {  ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { RegisterPage } from './register.page';

const routes: Routes = [
  {
    path: '',
    component: RegisterPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [RegisterPage]
})
export class RegisterPageModule {}

在我看来，无法读取 html 的 formsControll。有没有人经历过同样的情况？有谁知道如何解决这个问题？

标签： angulartypescriptionic-framework

angular - RegisterPage.html:57 错误类型错误：无法读取未定义的属性“有效”（离子 4）

问题描述

解决方案

推荐阅读