Pesquisa de site

typescript - Erro TS2531: objeto possivelmente nulo em formulários reativos do Angular

Oi, eu tentei fazer a validação de formulário reativo no Angular 11, mas está mostrando o seguinte erro no terminal.

erro TS2531: o objeto possivelmente é nulo.

meu código em signup.component.ts

import {FormGroup, FormControl, Validators} from '@angular/forms';
        
form =  new FormGroup({
    firstName: new FormControl('',Validators.required)
})
    
get f()
{
    return this.form.controls;
}

em signup.component.html

<form role="form" [formGroup]="form">
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" formControlName="firstName" [ngClass]="{'is-invalid':form.get('firstName').touched && form.get('firstName').invalid}">
        <div *ngIf="f.firstName.touched && f.firstName.invalid">
            <small class="text-danger" *ngIf="f.firstName.errors.required">
                Name is required!
            
            
        </div>
    </div>
</form>

quando eu executo está mostrando erro em

<small class="text-danger" *ngIf="f.firstName.errors.required"> Nome é obrigatório!

erro TS2531: o objeto possivelmente é nulo.

Resposta #1

O objeto f.firstName.errors pode ser nulo. Use o operador de navegação segura ?:

*ngIf="f.firstName.errors?.required"

Resposta #2

Para a versão do Angular ^14.0, isso pode ser usado:

form.controls['firstName'].errors?.['required']
and 
form.controls['firstName'].errors?.['minlength']

Artigos relacionados