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>

來源

2017-08-30 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>

來源

2017-08-30 00:17:44 DeborahK

謝謝，這真的把我一個循環 - 它的排序是有意義的，是有點意外。我認爲也許一個好的做法是將這些錯誤信息包與另一個與* ngIf，檢查control.isValid以避免此問題。 – 333Matt

UPDATE：

根據這一article，你應該特權hasError （）語法，因爲我建議：不要使用control.errors？.someError，請使用control.hasError（'someError'）

您還可以使用下面的語法，這將無需上班先有一個值：

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

這將檢查中的錯誤「必要」。

這也能發揮作用，它的更簡潔：

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

來源

2017-08-30 05:12:55 Vega

Angular 4 Reactive Forms FormControl錯誤爲空

回答

相關問題