Angular 4 Reactive Forms FormControl错误为空

问题描述：

如果我在没有输入任何内容的情况下通过文本输入选项卡，错误消息显示表明所需验证器已正确启动。但是，如果我输入任何东西进入的领域之一，控制台会立即引发此错误：Angular 4 Reactive Forms FormControl错误为空

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>

答

该错误来自此：

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

谢谢，这真的把我一个循环 - 它的排序是有意义的，是有点意外。我认为也许一个好的做法是将这些错误信息包与另一个与* ngIf，检查control.isValid以避免此问题。 – 333Matt

答

UPDATE：

根据这一article，你应该特权hasError （）语法，因为我建议：不要使用control.errors？.someError，请使用control.hasError（'someError'）

您还可以使用下面的语法，这将无需上班先有一个值：

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

这将检查中的错误“必要”。

这也能发挥作用，它的更简洁：

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

Angular 4 Reactive Forms FormControl错误为空

相关推荐