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

Question

我是Angular尝试第6版的新手。

要求我有两个控件（无线电和下拉列表），我想用HTML格式打印json中的所有控件值只使用{{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

你有2个错误

1）formControleName应该是formControlName（错字错误）

2）你不应该在select标签内使用ngmodel，因为它会给你一个控制台错误。

像这样

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

Demo

Answer 2

试试这种方式

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

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

.ts文件

communication:any = '';

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

您需要获取下拉单击事件并将其绑定到模型。在change()的帮助下，您将获得选定的下拉值。

Answer 3

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