0
votes

Impossible de transmettre la valeur dans le groupe Formulaire angulaire 6 post-demande

Cette application angulaire faisant une requête http.post, je passe le corps de cette API via form-group.Voici l'extrait de code

saveRecord() {
    console.log(this.record);// nothing is printed
    this.spinner.show();
    console.log(this.record);
    this.http.post('/api/accounts', this.record)
      .subscribe(res => {
     //status success or failure
   })

Je passe accountid à function (saveRecord), cliquez sur le bouton comme indiqué ci-dessus

Je vois que la variable d'enregistrement n'a aucune valeur bien qu'elle soit transmise depuis formgroup

<mat-tab-group>
  <mat-tab  label="New Account">
  <br><br>
  <button class="btn" type="button" (click)="saveRecord()" [disabled]="!recordForm.form.valid">Create</button>&nbsp;&nbsp;&nbsp;

 <form  #recordForm="ngForm">
 <div class="form-group">
    <label class="col-sm-6 col-form-label" for="name">Customer Number</label>
    <input type="text" class="form-control col-sm-6" [(ngModel)]="record.accountid" name="accountid" required>
 </div>

L'API ne parvient pas à revenir en tant qu'enregistrement (le corps de la requête n'est pas défini)

typescript angular api rest

6 commentaires

avez-vous initialisé l'enregistrement, record = {id: null}

pouvez-vous partager plus de code de composant? comme avec quoi avez-vous initialisé this.record?

ressemble à this.record est nul ou indéfini, le définissez-vous quelque part?

À l'intérieur de nginit ngOnInit () {this.record = []; }

cela ne fonctionnera pas. il doit être initialisé comme this.record = {accountid: ""}

Cela fonctionne maintenant, j'ai initialisé l'enregistrement pour enregistrer = {id: null}

3 Réponses :

1
votes

Dans votre HTML

record = {id:null};

saveRecord(form:NgForm) {
    console.log(form.value);
  }

dans votre fichier ts

<button class="btn" type="button" (click)="saveRecord(recordForm)" [disabled]="!recordForm.form.valid">Create</button>&nbsp;&nbsp;&nbsp;

 <form  #recordForm="ngForm">
 <div class="form-group">
    <label class="col-sm-6 col-form-label" for="name">Customer Number</label>
    <input type="text" class="form-control col-sm-6" [(ngModel)]="record.id" name="accountid" required>
 </div>
 </form>

0 commentaires

1
votes

Assurez-vous que vous l'avez ajouté dans votre fichier de composant

record = {
  accountid: null
};

sinon, il affichera une erreur non définie

0 commentaires

0
votes

Essayez ce code, il vous aidera. HTML

   this.recordForm = new FormGroup({
      accountid: new FormControl('', [Validators.required]),
    });

    saveRecord(data) {
    console.log(data.value);// nothing is printed
    this.spinner.show();
    console.log(data.value);
    this.http.post('/api/accounts', data.value)
      .subscribe(res => {
     //status success or failure
   })

<form [formGroup]="loginForm">
     <div class="form-group">
        <label class="col-sm-6 col-form-label" for="name">Customer 
         Number</label>
           <input type="text" class="form-control col-sm-6" 
           formControlName="accountid" required>
     </div>
     <button type="button"  class="btn" 
     (click)="saveRecord(recordForm)"
     [disabled]="recordForm.invalid">Create</button>
</form>

0 commentaires