1

Estou tentando editar um dispositivo dentro do meu CRUD,utilizando Angular 9 e Realtime Database do Firebase, ao clicar no botão "Editar", sou redirecionado para outra página para que eu possa alterar os valores daquele objeto, porém estou recebendo o seguinte erro do console ERROR Error: Must supply a value for form control with name: 'key'.

Sei que preciso passar o valor da key para o formulário, porém não estou conseguindo o fazer e não tenho mais ideia de como prosseguir, estou ficando confuso

Segue os códigos

edit.html

<!-- Device form -->
<div class="inner-wrapper">
  <form [formGroup]="editDeviceForm" (ngSubmit)="updateDevice()" novalidate>
    <mat-card>
      <div class="controlers-wrapper">

        <!-- Device no. -->
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Dispositivo No." formControlName="key">
          <mat-error *ngIf="handleError('key', 'required')">
            You must provide a <strong>device number</strong>
          </mat-error>
        </mat-form-field>

        <!-- Device name -->
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Nome" formControlName="name">
          <mat-error *ngIf="handleError('name', 'required')">
            Você deve fornecer um <strong>nome</strong>
          </mat-error>
        </mat-form-field>

        <!-- Device description -->
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Descrição" formControlName="description">
        </mat-form-field>

        <!-- Device activity -->
        <div class="misc-bottom-padding">
          <mat-label>Atividade: </mat-label>
          <mat-radio-group aria-label="Select an option" formControlName="active">
            <mat-radio-button value="Ativo">Ativo</mat-radio-button>
            <mat-radio-button value="Inativo">Inativo</mat-radio-button>
          </mat-radio-group>
        </div>

        <!-- Route -->
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Rota" formControlName="route">
        </mat-form-field>

        <div class="full-wrapper button-wrapper">
          <div class="button-wrapper">
            <button mat-raised-button color="primary">Atualizar</button>
            <button mat-raised-button type="button" (click)="goBack()">Voltar</button>
          </div>
        </div>
      </div>
    </mat-card>

edit.ts

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  editDeviceForm: FormGroup;

  constructor(
    public fb: FormBuilder,
    private location: Location,
    private db: AngularFireDatabase,
    private deviceService: DeviceService,
    private actRoute: ActivatedRoute,
    private router: Router
  ) {
    var id = this.actRoute.snapshot.paramMap.get('id');
    this.deviceService.GetDevice(id).valueChanges().subscribe(data => {
      this.editDeviceForm.setValue(data);
    })
  }

  /* Update form */
  updateDeviceForm() {
    this.editDeviceForm = this.fb.group({
      key: ['', [Validators.required]],
      description: [''],
      active: ['Ativo', [Validators.required]],
      location: [],
      name: ['', [Validators.required]],
      route: ['']
    })
  }

  /* Get errors */
  public handleError = (controlName: string, errorName: string) => {
    return this.editDeviceForm.controls[controlName].hasError(errorName);
  }

  /* Go to previous page */
  goBack() {
    this.location.back();
  }

  /* Submit device */
  updateDevice() {
    var id = this.actRoute.snapshot.paramMap.get('id');
    if (window.confirm('Tem certeza que quer atualizar?')) {
      this.deviceService.UpdateDevice(id, this.editDeviceForm.value);
      this.router.navigate(['devices']);
    }
  }

  ngOnInit() {
    this.updateDeviceForm();
  }

device-service

  devicesRef: AngularFireList<any>;
  deviceRef: AngularFireObject<any>;

  constructor(private db: AngularFireDatabase, private routeService: RouteService) { }

  /* Create device */
  AddDevice(device: Device) {
    this.devicesRef.push({
      key: device.key,
      description: device.description,
      active: device.active,
      name: device.name,
      route: device.route
    })
      .catch(error => {
        this.errorMgmt(error);
      })
  }

  /* Get device */
  GetDevice(id: string) {
    this.deviceRef = this.db.object('/busao/devices/' + id);
    return this.deviceRef;
  }

  /* Get device list */
  GetDeviceList() {
    this.devicesRef = this.db.list('/busao/devices');
    return this.devicesRef;
  }

  /* Update device */
  UpdateDevice(id, device: Device) {
    this.deviceRef.update({
      key: device.key,
      description: device.description,
      active: device.active,
      name: device.name,
      route: device.route
    })
      .catch(error => {
        this.errorMgmt(error);
      })
  }

  /* Delete device */
  DeleteDevice(id: string) {
    this.deviceRef = this.db.object('/busao/devices/' + id);
    this.deviceRef.remove()
      .catch(error => {
        this.errorMgmt(error);
      })
  }

  // Error management
  private errorMgmt(error) {
    console.log(error)
  }

Caso precisem de mais alguma informação, só falar nos comentários, fico muito grato aos que puderem ajudar.

3
  • Quando aparece o erro no console? tem algum evento em especial? Tem a linha/método que está estourando o erro? Commented 27/02/2020 às 20:23
  • A linha exata que está dando o erro é onde eu abri a tag <form> passando qual o formGroup que ele está relacionado, a 3º linha do HTML de cima para baixo, para ser mais exato
    – Fire Zero
    Commented 27/02/2020 às 20:36
  • Dê uma avaliada no seguinte: pode ser que seu editDeviceForm: FormGroup esteja sendo instanciado depois do this.editDeviceForm.setValue(data); que está no seu construtor. Se você tentar utilizar o setValue antes do mesmo ser instancia ocorreria um erro. Commented 28/02/2020 às 12:24

1 Resposta 1

1

Remova (ngSubmit)="updateDevice()" e adicione no button

<button mat-raised-button color="primary" (click)="updateDevice()">Atualizar</button>

Teste em updateDevice() no edit.ts com console.log(this.editDeviceForm.value)

O erro deve estar acontecendo no UpdateDevice() do device-service, pois está chegando indefinido

Ou

Pode ser esse handleError('key', 'required')" que está causando o erro, pois o key está como string:

<mat-error *ngIf="handleError('key', 'required')">
    You must provide a <strong>device number</strong>
</mat-error>
3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .