Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

FormGroup - error TS2531: Object is possibly 'null'

Salve galera! Beleza?

Estou com o seguinte problema, possuo um formulário de cadastro de cliente e quero utilizar o FormGroup para as validações necessárias. Porém no primeiro item que adicionei a validação me deparei com o erro:

"Error: src/app/views/cadastro-usuario/cadastro-usuario.component.html:14:62 - error TS2531: Object is possibly 'null'."

O erro acontece no seguinte trecho:

<app-vmessage *ngIf="usuarioForm.get('nome').errors?.required" text="Preencha o nome corretamente."></app-vmessage>

Indicando que o problema está em "errors".

Fiz exatamente como na aula 4 do modulo 1 do curso de Angular parte 2 e tentei colocar a interrogação em outros pontos. Porém o erro persiste.

Meu component.ts:

import { Component, Input, OnInit } from '@angular/core';
import { Usuario } from '../../shared/usuario/usuario';
import { UsuarioService } from 'src/app/shared/usuario/usuario.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'app-cadastro-usuario',
  templateUrl: './cadastro-usuario.component.html',
  styleUrls: ['./cadastro-usuario.component.css']
})
export class CadastroUsuarioComponent implements OnInit {

  constructor(private usuarioService:UsuarioService, private formBuilder:FormBuilder) { }

  usuarioForm:FormGroup = this.formBuilder.group({
    nome:['', Validators.required]
  });

  usuario:Usuario = {
                      nome:'',
                      sobrenome:'',
                      login:'',
                      senha:'',
                      telefone: 0,
                      celular: 0,
                      email: '',
                      cep: 0,
                      uf: '',
                      cidade: '',
                      bairro: '',
                      endereco: '',
                      numero: 0,
                      complemento: '',
                      cpf: 0,
                      administrador:false
                    };

  ngOnInit(): void {
    this.usuarioForm = this.formBuilder.group({
      nome:['', Validators.required],
      sobrenome:[],
      login:[],
      senha:[],
      telefone:[],
      celular:[],
      email: [],
      cep: [],
      uf: [],
      cidade: [],
      bairro: [],
      endereco: [],
      numero: [],
      complemento: [],
      cpf:[],
      administrador:[],

    });

    console.log(this.usuarioForm.get('nome')?.errors);
  }

  saveUsuario(){
    this.usuarioService.saveUsuarios(this.usuario)
  }

}
1 resposta
solução!

Fala ai Renan, tudo bem? Tente adicionar um optional chaining no get, ficando:

<app-vmessage *ngIf="usuarioForm.get('nome')?.errors?.required" text="Preencha o nome corretamente."></app-vmessage>

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software