html - 如何将多个输入字段的预选值映射到角度6的数组中

Question

我有一些输入字段，我需要在提交时将其预选值捕获为数组格式，如 {"userid":1,"newstatus":[1],"mygroup":[1,2,3]}尝试使用 ngmodel 但它无法正常工作，这是下面的代码

home.component.html

<div class="form-group">
    <label for="email">Email address:</label>
    <input type="text"  class="form-control" [(ngModel)]="userid" id="userid">
  </div>

  <div class="form-group">
    <label for="pwd">List:</label>
    <select (change)="onSelectChange($event)" [(ngModel)]="newstatus" class="form-control"  id="list">
    <option *ngFor="let status of statusdata"  value="{{status.id}}">{{status.name}}</option>

    </select>
  </div>
  <div class="form-group" *ngFor="let status of statusdata" >

   <input  type="checkbox" [(ngModel)]="mygroup" (input)="onCheckChange($event)" value="{{status.id}}"/>{{status.name}}

  </div>

  <button type="submit" (click)="getFormData()" class="btn btn-default">Submit</button>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
  getListData: any;
 dataGroup: FormGroup;
 selectedGroups: string[];
 selectedRoles:string[];
 statusdata:any;
 userid: number;
 newstatus:any;
 mygroup:any;
  constructor() {

this.selectedGroups = [];
this.selectedRoles = [];
 }

  ngOnInit() {
this.statusdata = [{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}];

  }
   getFormData(){
      console.log(this.userid)
      console.log(this.newstatus)
      console.log(this.mygroup)
  }
  }

标签： htmlangulartypescript

Answer 1

一种实现方式如下：

statusdata在数组中添加了一个字段，选中。根据此属性的值，获取选定的值。检查代码以获取更多信息。

home.component.html

<div class="form-group">
    <label for="email">Email address:</label>
    <input type="text"  class="form-control" [(ngModel)]="userid" id="userid">
  </div>

  <div class="form-group">
    <label for="pwd">List:</label>
    <select (change)="onSelectChange($event)" [(ngModel)]="newstatus" class="form-control"  id="list">
    <option *ngFor="let status of statusdata"  value="{{status.id}}">{{status.name}}</option>

    </select>
  </div>
  <div class="form-group" *ngFor="let status of statusdata" >

<input type="checkbox" [(ngModel)]="status.selected"/>{{status.name}} 
  </div>

  <button type="submit" (click)="getFormData()" class="btn btn-default">Submit</button>

home.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
   getListData: any;
 dataGroup: FormGroup;
 selectedGroups: string[];
 selectedRoles:string[];
 statusdata:any;
 userid: number;
 newstatus:any;
 mygroup:any;
  constructor() {

this.selectedGroups = [];
this.selectedRoles = [];
 }

  ngOnInit() {
this.statusdata = [{"id":1,"name":"green", "selected":true},{"id":2,"name":"red", "selected":false},{"id":3,"name":"yellow", "selected":true}];

  }
   getFormData(){
      //alert(this.userid)
      //alert(this.newstatus)
      //alert(this.mygroup)
      let _this = this;
  _this.selectedGroups = [];
  _this.selectedRoles = [];
  _this.selectedRoles.push(this.newstatus);
  this.statusdata.forEach(function(item){
    if(item.selected == true)
    _this.selectedGroups.push(item.id);
  });
  let result = {};
  result.userid = _this.userid;
  result.newstatus = _this.selectedRoles;
  result.mygroup = _this.selectedGroups;
  console.log(result);
  }

}