web-dev-qa-db-ja.com

Angular 8：ERROR TypeError：未定義のプロパティ「無効」を読み取れません

これが実際に何を意味するのか誰かが説明できますか？私はAngularを初めて使用し、現在Angular 8を使用しています。これはコンソールに表示されます。

エラーTypeError：未定義のプロパティ「無効」を読み取れません

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)

ここにエラーがあるページを暗示する私のサワーコードがあります

register.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の最初の部分でフォームに使用する変数の配列を定義しました。多分私は何かを失いました、それは何ですか？

htmlangulartypescriptwebangular8
2
Dean Debrio

次のようなフォームオブジェクトのフォームコントロールにアクセスする必要があります：registerForm.get('user_name').invalidなど、各プロパティ（dirtyなど）およびフォーム内の各コントロールに対して。

別の方法は、各フォームコントロールのコンポーネントクラスにゲッターを作成することです。

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

その後、HTMLを現在の状態に保つことができます。

ここの例を見れば： https://angular.io/guide/form-validation#built-in-validators 彼らは言う：

この例では、いくつかのゲッターメソッドを追加します。リアクティブフォームでは、常にその親グループのgetメソッドを介して任意のフォームコントロールにアクセスできますが、テンプレートの短縮形としてゲッターを定義すると便利な場合があります。

フォームコントロールのゲッターへの参照。

1
Matt U

HTML * ngIfは、コンポーネントに含まれる変数ではないため、user_name.invalid（fullname.invalidと同じ）を見つけることができません。それらはformGroupにリストされていますが、それはクラスの先頭でuser_name変数を宣言することと同じではありません。

User_name、fullname、passwordを使用可能にするには、次のように宣言する必要があります。

user_name: string;
fullname: string;
password: string;

そして、それらをコードに入力します。本質的に同じデータが2か所に存在する場合、これは面倒になる可能性があります。

または、formGroupからコントロールの値を返す関数を使用することもできます。

getUserName() {
    return this.formGroup.controls['user_name'].value;
}

ただし、取り除いておくべき主なことは、formGroupで指定されたコントロールは、thisを介してアクセスされる変数と同じ方法で表示することができないことです。

1
Steve