web-dev-qa-db-fra.com

Angular 4 Formulaires réactifs Les erreurs FormControl sont nulles

Si je fais défiler les entrées de texte sans entrer quoi que ce soit, les divs msg d'erreur s'affichent indiquant que le validateur requis s'est correctement déclenché. Cependant, si je tape quelque chose dans l'un des champs, la console lance immédiatement cette erreur:

Cannot read property 'required' of null

Voici ma composante:

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');
  }

}

et 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

Cette erreur vient de ceci:

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

Lorsque vous entrez une valeur, il n'y a plus de collection d'erreurs, donc vérifiez newPassword.errors.required génère cela Cannot read property 'required' of null Erreur.

Essayez plutôt quelque chose comme ceci:

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

À titre d'exemple, le mien ressemble à ceci:

            <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

Vous pouvez également utiliser la syntaxe suivante et cela fonctionnera sans avoir besoin d'avoir une valeur d'abord:

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

Cela vérifiera "requis" dans les erreurs.

Cela fonctionnera également et c'est plus concis:

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

Si vous compilez avec l'option AOT, selon ceci article , vous devez privilégier la syntaxe hasError ():

N'utilisez pas control.errors? .SomeError, utilisez control.hasError (‘someError’)

10
Vega