Angular 6：无法使用 form.value | 检索 HTML 中的所有表单控件值json

Posted 2023-03-05

【中文标题】Angular 6：无法使用 form.value | 检索 HTML 中的所有表单控件值json

【英文标题】：Angular 6: unable to retrieve all form Control value in HTML using form.value | jsonAngular 6：无法使用 form.value | 检索 HTML 中的所有表单控件值json

【发布时间】：2019-05-31 14:40:30

【问题描述】：

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

要求我有两个控件（单选和下拉），我想仅使用 form.value | 以 html 形式打印 json 中的所有控件值json

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

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

【参考方案1】：

试试这个方法

<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() 的帮助下，您将获得选定的下拉值。

【参考方案2】：

你有两个错误

1) formControleName 应该是 formControlName（错字）

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

喜欢这个

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

Demo

【讨论】：

非常感谢，它现在对我有用。只是想知道我是否可以使用 [(ngValue)] 而不是 [value]

你可以，但不应该是两种方式

【参考方案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>