TypeError: невозможно прочитать свойства null (чтение «writeValue»)

Question

Я пытаюсь получить объект по id, но если этот объект не существует, компонент зарегистрирует объект.

но когда объект существует, он нормально принимает объект и снова выдает эту ошибку

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>

ТС:

      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(),
    });
  }
}

ИНФОРМАЦИЯ:

Angular CLI: 14.0.5 Узел: 16.14.2 Диспетчер пакетов: npm 8.5.0 ОС: win32 x64

РЕДАКТИРОВАТЬ:

Обнаружил, что ошибка в галочке html, ошибка выходит, когда вынимаю, а она мне нужна, как решить?

Атрибут флажка является логическим

Answer 1

Я предполагаю, что ошибка заключается в том, что [(ngModel)] следует указывать во входном теге, а не в теге метки.