Angular 6：无法使用{{form.value |。>检索HTML中的所有表单控件值 JSON}}

Question

I am new to Angular trying with version 6.

Requirement I have two controls (radio and dropdown) and i want to print all controls value in json in HTML form only using {{form.value | json}}

Problem {{form.value | json}} is printing only radio button value but not printing dropdownlist selected value. Below is my code snippet, please help me out-

 //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"]; } } 

 --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.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 { } 

Answer 1

Try this way

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

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

.ts file

communication:any = '';

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

You need to get the dropdown click event and bind it to model. with the help of change() you will get selected dropdown value.

Answer 2

You are having 2 mistakes

1) formControleName should be formControlName (typo mistake)

2) you should not use ngmodel inside select tag as it will give you a console errors.

like this

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

Demo

Answer 3

You can do this

TS

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app',
  templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
  title = 'AngularRadioDropDownCheckBox';
  genders: string[];
  communicationMode: string[];
  genderForm: FormGroup;
  constructor() {
    this.genderForm = new FormGroup({
      'gender': new FormControl('male'),
      'communication': new FormControl(null)
    });
  }
  ngOnInit() {
    this.genders = ["male", "female", "others"];
    this.communicationMode = ["mobile", "telephone", "email"];
  }
}

HTML

<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>