TypeError：无法读取 null 的属性（读取“writeValue”）

Question

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

Answer 1

我猜错误是 - [(ngModel)] 应该在输入标签中给出，而不是在标签标签中。