CODEWITHSUNDEEP
angularangular-reactive-formsangular-controlvalueaccessor
Victor
Victor

Reputation: 5

TypeError: Cannot read properties of null (reading 'writeValue')

I'm trying to get the object by id, but if that object doesn't exist, the component will register the object.

but when the object exists, it takes the object normally and throw this error again

HTML:

    <div class="card shadow-sm m-5 p-5 bg-light" style="min-width: 60%; max-width: 70%">
      <mat-toolbar>{{(veiculo && veiculo.id)?'Editar Veiculo':'Cadastrar Veiculo'}}</mat-toolbar>
    
      <div class="card-body">
          <div class="form-group" *ngIf="veiculo.id != null">
            <label class="form-label">ID</label>
            <input type="text" class="form-control" [(ngModel)]="veiculo.id" readonly />
          </div>
          <div class="form-group">
            <label class="form-label">Placa Oeste</label>
            <input type="text" class="form-control" [(ngModel)]="veiculo.placaOeste" />
          </div>
          <div class="form-group">
            <label class="form-label">Modelo</label>
            <input type="text" class="form-control" [(ngModel)]="veiculo.modelo">
          </div>
          <div class="form-group">
            <label class="form-label">Marca</label>
            <input type="text" class="form-control" [(ngModel)]="veiculo.marca">
          </div>
          <div class="form-group">
            <label class="form-label">Ano</label>
            <input type="text" class="form-control" [(ngModel)]="veiculo.ano">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input">
            <label class="form-check-label" [(ngModel)]="veiculo.portariaSEJUSP">Deriva da Portaria SEJUSP/DGPC nº
        133/2018</label>
    </div>
    
          <div>
            <button class="btn btn-primary m-2" (click)="salvar()">
              Salvar
            </button>
            <button type="button" class="btn btn-warning mx-2" routerLink="/veiculos">
              Cancelar
            </button>
          </div>
      </div>

TS:

export class VeiculoCadastrarEditarComponent implements OnInit {
  veiculoForm!: FormGroup;
  veiculo = new Veiculo();
  id: any = 0;
  constructor(
    private service: VeiculoService,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.id = this.activatedRoute.snapshot.paramMap.get('id');
    if (this.id) {
      this.service.pesquisarPorId(this.id).subscribe({
        next: (data) => (this.veiculo = data),
        error: (err) => console.log(err),
      });
    }
  }

  salvar() {
    if (this.veiculo && this.veiculo.id) {
      this.service
        .atualizar(this.veiculoForm.value, this.veiculo.id)
        .subscribe({
          next: () => this.router.navigateByUrl('/veiculos'),
          // error: () => this.onErrorEdicao(),
        });
    } else {
      this.service.cadastrar(this.veiculoForm.value).subscribe({
        next: () => this.router.navigateByUrl('/veiculos'),
        // error: () => this.onErrorCadastro(),
      });
    }
  }

  deletar() {
    this.service.deletar(this.veiculoForm.value).subscribe({
      next: () => this.router.navigateByUrl('/veiculos'),
      // error: () => this.onErrorDelete(),
    });
  }
}

INFO:

Angular CLI: 14.0.5 Node: 16.14.2 Package Manager: npm 8.5.0 OS: win32 x64

EDIT:

I found that the error is in the html checkbox, the error goes out when I take it out but I need it, how can I solve it?

The attribute of checkbox is boolean

Upvotes: 0

Views: 1472

Answers (1)

Shashank Shekhar
Shashank Shekhar

Reputation: 46

I guess mistake is - [(ngModel)] should be given in input tag, not in label tag.

Upvotes: 1

Related Questions