web-dev-qa-db-ja.com

Angular 4 Reactive Forms FormControl errors is null

何も入力せずにテキスト入力をタブで移動すると、必要なバリデーターが正しく起動されたことを示すエラーメッセージdivsが表示されます。ただし、いずれかのフィールドに何かを入力すると、コンソールはすぐにこのエラーをスローします。

Cannot read property 'required' of null

ここに私のコンポーネントがあります：

import { PasswordValidators } from './../validators/password.validators';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-changepassword-form',
  templateUrl: './changepassword-form.component.html',
  styleUrls: ['./changepassword-form.component.css']
})
export class ChangepasswordFormComponent {

  form;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      newPassword: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    })
  }

  get newPassword() {
    return this.form.get('newPassword');
  }

  get confirmPassword() {
    return this.form.get('confirmPassword');
  }

}

およびHTML：

<form [formGroup]="form">  
  <div class="form-group">
    <label for="newPassword">New Password</label>
    <input formControlName="newPassword" id="newPassword" type="text" class="form-control">
    <div class="alert alert-danger" *ngIf="newPassword.touched && newPassword.errors.required">
      Required
    </div>
  </div>
  <div class="form-group">
    <label for="confirmPassword">Confirm Password</label>
    <input formControlName="confirmPassword" id="confirmPassword" type="text" class="form-control">
    <div class="alert alert-danger" *ngIf="confirmPassword.touched && confirmPassword.errors.required">
      Required
    </div>
  </div>

  <p><button class="btn btn-primary">Submit</button></p>

</form>
javascriptangulartypescriptangular-reactive-forms
6
333Matt

そのエラーはこれから来ています：

*ngIf="newPassword.touched && newPassword.errors.required"

値を入力すると、エラーコレクションがなくなるため、newPassword.errors.requiredはCannot read property 'required' of nullエラー。

代わりに次のようなものを試してください：

*ngIf="newPassword.touched && newPassword.errors?.required"

例として、私のものは次のようになります。

            <div class="col-md-8">
                <input class="form-control" 
                        id="productNameId" 
                        type="text" 
                        placeholder="Name (required)"
                        required
                        minlength="3"
                        [(ngModel)] = product.productName
                        name="productName"
                        #productNameVar="ngModel" />
                <span class="help-block" *ngIf="(productNameVar.touched ||
                                                 productNameVar.dirty || product.id !== 0) &&
                                                 productNameVar.errors">
                    <span *ngIf="productNameVar.errors.required">
                        Product name is required.
                    </span>
                    <span *ngIf="productNameVar.errors.minlength">
                        Product name must be at least three characters.
                    </span>
                </span>
            </div>
9
DeborahK

また、次の構文を使用することもできます。この場合、最初に値を設定する必要なく機能します。

form.get('newPassword').hasError('required')

これにより、エラーで「必須」がチェックされます。

これも同様に機能し、より簡潔です：

form.hasError('required','newPassword')

この article に従って、AOTオプションでコンパイルする場合、hasError（）構文に特権を与える必要があります。

Control.errors？.someErrorを使用せず、control.hasError（ 'someError'）を使用します

10
Vega