javascript - Angular 6 : unable to retrieve all form Control value in HTML using {{form. 值 | JSON}}

Question

我是 Angular 的新手，正在尝试使用版本 6。

要求 我有两个控件(单选框和下拉框)，我想仅使用 {{form.value | JSON}}

问题 {{form.value | json}} 仅打印单选按钮值但不打印下拉列表选择的值。下面是我的代码片段，请帮帮我-

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

你可以做到 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>