html - Angular 8 :ERROR TypeError: Cannot read property 'invalid' of undefined

Question

有人可以解释一下这实际上意味着什么吗？我是 Angular 新手，目前使用 Angular 8，这出现在我的控制台上。

ERROR TypeError: Cannot read property 'invalid' of undefined

at Object.eval [as updateDirectives] (RegisterComponent.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44637)
at execComponentViewsAction (core.js:44565)
at checkAndUpdateView (core.js:44278)
at callViewAction (core.js:44637)
at execEmbeddedViewsAction (core.js:44594)
at checkAndUpdateView (core.js:44272)
at callViewAction (core.js:44637)

这是我的源代码，它暗示有错误的页面

注册.component.ts

   import { authTkn } from './../shared/model/loginDetails';
   import { MahasiswaApiService } from './../shared/services/mahasiswa-api.service';
   import { Component, OnInit } from '@angular/core';
   import { Router, RouterModule } from '@angular/router';
   import { FormBuilder, FormGroup, Validators } from '@angular/forms';
   import { first } from 'rxjs/operators';
   import * as CryptoJS from 'crypto-js';
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})

export class RegisterComponent implements OnInit {

  public authTkn: authTkn = null;

  registerForm = this.fb.group({
    user_name: ['', Validators.required],
    fullname: ['', Validators.required],
    telepon: ['', Validators.required],
    email: ['', Validators.required],
    alamat: ['', Validators.required],
    birthdate: ['', Validators.required],
    foto_profil: ['', Validators.required],
    password: ['', Validators.required],
  });


constructor(private mahasiswaApi: MahasiswaApiService, private route: Router, private fb: FormBuilder) { }

ngOnInit() {
  }


onSubmit() {
    this.registerForm.controls.password.patchValue(
      CryptoJS.SHA512(this.registerForm.value.password).toString()
    );
    console.log(this.registerForm.value);
    this.mahasiswaApi.postUserRegister(this.registerForm.value).subscribe(
      res => {
        console.log(res);
        this.authTkn = res;
        console.log(this.authTkn);
        localStorage.setItem('token', this.authTkn.token);
        this.mahasiswaApi.getCurrentToken();
        this.route.navigate(['/home']);
        alert(this.authTkn.info);
      },
      error => {
        console.log(error);
        alert(error.error.message);
      }
    );
  }
}

register.component.html

<div class="login-form">
  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
      <h2 class="text-center"> Register </h2>

      <!-- Register Username -->
      <div class="form-group">
          <label for="user_name"> Username </label>
          <input type="text" class="form-control" name="Username" formControlName="user_name" placeholder="text">
          <div class="alert alert-danger" *ngIf="user_name.invalid && user_name.dirty" @myInsertRemoveTrigger>Username Must Be filled</div>
      </div>

      <!-- Register Nama Lengkap -->
      <div class="form-group">
        <label for="nama lengkap"> Nama Lengkap </label>
        <input type="text" class="form-control" name="Nama Lengkap" formControlName="fullname" placeholder="text">
        <div class="alert alert-danger" *ngIf="fullname.invalid && fullname.dirty" @myInsertRemoveTrigger> Please fill your complete name here</div>
    </div>

      <!-- Register Nomor Telepon -->
      <div class="form-group">
        <label for="nomor_telepon"> Nomor Telepon </label>
        <input type="text" class="form-control" name="Nomor Telepon" formControlName="telepon" placeholder="text">
      </div>

    <!-- Register Email -->
    <div class="form-group">
      <label for="email"> Email </label>
      <input type="email" class="form-control" name="Email" formControlName="email" placeholder="email">
    </div>

    <!-- Register Tanggal Lahir -->
    <div class="form-group">
      <label for="Tanggal_lahir"> Tanggal Lahir </label>
      <input type="date" class="form-control" name="Tanggal Lahir" formControlName="birthdate" placeholder="date">
    </div>

    <!-- Register Foto -->
    <div class="form-group">
      <label for="Foto_Profil"> Foto Profil </label>
      <input type="file" class="form-control" name="Foto Profil" formControlName="foto_profil" placeholder="file">
    </div>

    <!-- Register Password -->
    <div class="form-group">
      <label for="Password"> Password </label>
      <input type="password" class="form-control" name="Password" formControlName="password" placeholder="password">
      <div class="alert alert-danger" *ngIf="password.invalid && password.dirty" @myInsertRemoveTrigger>Password Must Be filled</div>
  </div>


      <!-- Button shit -->
      <div class="form-group">
          <button type="submit" class="btn btn-primary btn-block" [disabled]="!registerForm.valid"> Register </button>
      </div>

      <div class="clearfix">
          <label class="pull-left checkbox-inline"><input type="checkbox" formControlName="remember_me"> Remember me</label>
      </div>
  </form>
</div>

也许我遇到了一些变量定义问题，但我实际上在 ts 的第一部分为我的表单定义了使用变量的数组。也许我确实丢失了一些东西，那是什么？

Answer 1

您需要像这样访问表单对象上的表单控件:registerForm.get('user_name').invalid 等等，对于每个属性(例如 dirty )以及表单中的每个控件。

另一种选择是在组件类中为每个表单控件创建一个 getter:

get user_name() {
    return this.registerForm.get('user_name');

然后您可以保持当前的 HTML 不变。

如果您查看此处的示例:https://angular.io/guide/form-validation#built-in-validators他们说:

This example adds a few getter methods. In a reactive form, you can always access any form control through the get method on its parent group, but sometimes it's useful to define getters as shorthands for the template.

引用表单控件的 getter。