Vous ne trouvez pas le contrôle avec attribut name non spécifiée dans le constructeur angulaire 6 forme

voix
1

J'ai reçu ce message d'erreur lorsque vous essayez de mettre à jour la table de grille avec le fichier HTML.

Ici, je l'ai utilisé des données statiques pour la table pour afficher et importés d'autres composants qui affiche la table primeng et j'ai ajouté un bouton de mise à jour avec une fonction qui redirige vers une autre page pour la mise à jour des données.

La question est vu dans la première ligne dans le fichier HTML-à-dire; [FormGroup] = myvehicle

J'ai essayé de vérifier avec un nom de groupe de forme différente mais la question est la même.

import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-crud',
  templateUrl: './crud.component.html',
})
export class CrudComponent implements OnInit {
  myvehicle: FormGroup;
  display: boolean;
  id: number;
  vin: any;
  year: number;
  brand: string;
  color: string;
  vehicle: any;
  Data: any;

  constructor(private activatedRoute: ActivatedRoute, private fb: FormBuilder) {
   }

  ngOnInit() {
    this.myvehicle = this.fb.group({
    vin: [''],
    year: [''],
    brand: [''],
    color: ['']
  });
    this.vehicle = [
      {
       id: 1 , vin: 'dsad231ff' , year : 2012 , brand: 'VW' , color: 'Orange'
      },
      {
        id: 2 , vin: 'gwregre345' , year : 2011 , brand: 'Audi' , color: 'Black'
      },
      {
        id: 3 , vin: 'h354htr' , year : 2005 , brand: 'Renault' , color: 'Gray'
      },
      {
        id: 4, vin: 'j6w54qgh' , year : 2003 , brand: 'BMW', color: 'Blue'
      },
      {
        id: 5, vin: 'hrtwy34' , year : 1995 , brand: 'Mercedes' , color: 'Orange'
      }
    ];
    debugger
    this.activatedRoute.paramMap
    .subscribe( params => {
    this.id = +params.get('id');
    });

      this.vehicle.forEach(element => {
        if (element.id === this.id) {
            this.Data = element;
              }
      });
      this.myvehicle.patchValue({
        vin: this.Data.vin,
        year: this.Data.year,
        brand: this.Data.brand,
        color:  this.Data.color
      });
  }

}
<form [formGroup]=myvehicle>
<label >Vin:</label>
<input type=text [formControlName]=vin ><br><br>
<label >Year:</label>
<input type=text [formControlName]=year ><br><br>
<label >Brand:</label>
<input type=text [formControlName]=brand ><br><br>
<label >Color:</label>
<input type=text [formControlName]=color ><br><br>
</form>

Créé 18/12/2018 à 11:05
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

Je pense que le principal problème est ici

<input type="text" [formControlName]="vin" ><br><br>

vous essayez de passer une variable vide

vin: any;

comme nom de commande, cela peut être résolu de cette manière:

<input type="text" formControlName="vin" ><br><br>

il suffit de retirer les crochets et définir le nom de commande sous forme de chaîne.

il devrait résoudre votre problème.

En outre, cette partie

  this.activatedRoute.paramMap
.subscribe( params => {
this.id = +params.get('id');
});

  this.vehicle.forEach(element => {
    if (element.id === this.id) {
        this.Data = element;
          }
  });
  this.myvehicle.patchValue({
    vin: this.Data.vin,
    year: this.Data.year,
    brand: this.Data.brand,
    color:  this.Data.color
  });

peut être simplifiée

    this.activatedRoute.paramMap
  .subscribe(params => {
    const id = params.get('id');

    if (this.vehicle[id]) {
      this.myvehicle.patchValue(this.vehicle[id]);
    }
  });

ici patchValue ne fonctionne que lorsque vous avez un identifiant correct dans params routeur

Créé 18/12/2018 à 17:03
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more