3
votes

Angular 6: impossible de récupérer toutes les valeurs de contrôle de formulaire en HTML en utilisant {{form.value | json}}

Je suis nouveau dans Angular en essayant avec la version 6.

Exigence J'ai deux contrôles (radio et liste déroulante) et je souhaite imprimer la valeur de tous les contrôles en json sous forme HTML uniquement en utilisant {{ form.value | json}}

Problème {{form.value | json}} n'imprime que la valeur du bouton radio, mais n'imprime pas la valeur sélectionnée dans la liste déroulante. Voici mon extrait de code, aidez-moi s'il vous plaît-

//app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {ReactiveFormsModule,FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

--AppComponent.html
<!--The content below is only a placeholder and can be replaced.-->
<form [formGroup]="genderForm" #radioForm="ngForm">
<div class="radio">
  <label for="gender" *ngFor="let gender of genders">
  <input type="radio" formControlName="gender" name="gender" value={{gender}} ngModel   >{{gender}}
  </label>
</div>
<div class="form-group">
  
    <select formControleName="communication" name="commMod"  >
      <option *ngFor="let commMod of communicationMode"   value={{commMod}} ngModel >{{commMod}}</option>
    </select>
  
</div>
{{genderForm.value | json}}
</form>

<router-outlet></router-outlet>

//app.component.ts
import { Component,OnInit } from '@angular/core';
import {FormBuilder,FormGroup,Validators} from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.styl']
})
export class AppComponent implements OnInit {
  title = 'AngularRadioDropDownCheckBox';
  genders:string[];
  communicationMode:string[];
  genderForm:FormGroup;
  constructor(private formBuilder:FormBuilder){
this.genderForm=this.formBuilder.group({
  gender:[],
  communication:[]
})
  }
  ngOnInit(){
    this.genders=["male","female","others"];
    this.communicationMode=["mobile","telephone","email"];
  }
}

javascript typescript angular html angular6

0 commentaires

3 Réponses :

0
votes

Essayez de cette façon

communication:any = '';

change(event){
   this.communication = event;
}

fichier .ts

<select (change)="change($event.target.value)" name="commMod"  >
  <option *ngFor="let commMod of communicationMode">{{commMod}}</option>
</select>

{{genderForm.value | json}}
{{communication}}

Vous devez obtenir l'événement de clic déroulant et liez-le au modèle. avec l'aide de change () , vous obtiendrez la valeur de la liste déroulante sélectionnée.

0 commentaires

0
votes

Vous avez 2 erreurs

1) formControleName devrait être formControlName (faute de frappe)

2) vous ne devriez pas utiliser ngmodel dans la balise select car cela vous donnera des erreurs de console. p >

comme ceci

<select formControleName="communication" name="commMod"  >
      <option *ngFor="let commMod of communicationMode"   value={{commMod}} >{{commMod}}</option>
    </select>

Démo

2 commentaires

Merci beaucoup, cela fonctionne pour moi maintenant. Je voulais juste savoir si je peux utiliser [(ngValue)] au lieu de [value]

Tu peux mais ça ne devrait pas être dans les deux sens

1
votes

Vous pouvez effectuer ceci

<form [formGroup]="genderForm" #radioForm="ngForm">
    <div class="radio">
        <label for="gender" *ngFor="let gender of genders">
  <input type="radio" formControlName="gender" name="gender" [value]="gender">{{gender}}
  </label>
</div>
<div class="form-group">
    <select formControlName="communication" name="commMod">
      <option *ngFor="let commMod of communicationMode" [value]="commMod" >{{commMod}}</option>
    </select>
</div>
{{genderForm.value | json}}
</form>

0 commentaires