角4反応性フォームFormControlエラーがヌル

Question

何も入力せずにテキスト入力をタップすると、エラーmsg divsが表示され、必要なバリデーターが正しく起動したことを示します。

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> 

Answer 1

というエラーここ

Cannot read property 'required' of null 

は私のコンポーネントである：私はフィールドの1つに何かを入力する場合は、コンソールは、すぐにこのエラーがスローされますこれから来ている：

値を入力すると、エラーコレクションがなくなり、newPassword.errors.requiredがエラーCannot read property 'required' of nullを生成していることを確認します。

代わりにこのような何か試してみてください：

  <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> 

Answer 2

UPDATE：

このarticleによると、あなたが権限hasErrorがすべき例として

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

を、鉱山はこのようになります。私は示唆したように、（）構文を使用します：control.errorsを使用しないでください？.someError、use control.hasError（ 'someError'）

---

はまた、次の構文を使用することができ、それが最初の値を持つことがなくても動作します：

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

これはエラーで「必要」をチェックします。

これは同様に動作し、それがより簡潔です：

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