Question

注意：我是软件开发的新手，我刚开始使用Angular 2进行前端开发。

我计划构建一个复选框的过滤器数组，它会在提交时返回选中的值。

我的代码如下。

我在TS文件中声明了范围和任期。

let amountRanges = [
  { id: 1, label: 'amtRange1', low: '25000', high:'50000' },
  { id: 2, label: 'amtRange2', low: '50001', high:'100000' },
  { id: 3, label: 'amtRange3', low: '100001', high:'200000' },
  { id: 4, label: 'amtRange4', low: '200001', high:'300000' },
  { id: 5, label: 'amtRange5', low: '300001', high:'400000' },
  { id: 6, label: 'amtRange6', low: '400001', high:'500000' }
]

export { amountRanges }

let tenureRanges = [
  { id: 1, label: 'tenure6', name:'6 Months' },
  { id: 2, label: 'tenure12', name:'12 Months' },
  { id: 3, label: 'tenure18', name:'18 Months' },
  { id: 4, label: 'tenure24', name:'24 Months' },
  { id: 5, label: 'tenure30', name:'30 Months' },
  { id: 6, label: 'tenure36', name:'36 Months' }
]

export { tenureRanges }

这是HTML代码

<section>
    <h4>Filters</h4>
    <hr>
    <form [formGroup]="form">
        <!-- Loan Amount Filter -->
        <div class="form-group">
        <label>LOAN AMOUNT</label>
        <div>
            <ul class="list-unstyled" formArrayName="amtranges">
                <li *ngFor="let range of form.controls.amtranges.controls; let i = index">
                    <input type="checkbox" formControlName="{{i}}"> &#8377;{{amtArray[i].low}} - &#8377;{{amtArray[i].high}}
                </li>
            </ul>
            </div>
        </div>

        <div class="form-group">
        <label>LOAN TENURE</label>
        <div>
            <ul class="list-unstyled" formArrayName="tenures">
                <li *ngFor="let tenure of form.controls.tenures.controls; let i = index">
                    <input type="checkbox" formControlName="{{i}}"> {{tenureArray[i].name}}
                </li>
            </ul>
            </div>
        </div>

        <div><strong>Model value:</strong><br />{{filter | json}}</div>

        <div class="row">
            <div class="col-sm-6"><button type="button" class="btn btn-primary" [disabled]="!form.valid" (click)="submitForm()">Submit</button></div>
            <div class="col-sm-6"><button type="button" class="btn btn-default" (click)="this.form.reset()">Reset</button></div>
        </div>
    </form>
</section>

我正在运行Angular2组件，如下所示

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

import { amountRanges, tenureRanges } from './borrower-filter.interface';

@Component({
  moduleId: module.id,
  selector: 'borrower-filters',
  templateUrl: './borrower-filters.component.html',
  styleUrls: ['./borrower-filters.component.css']
})

export class BorrowerFiltersComponent implements OnInit {

  //Loan Amount
  amtArray: any = [];
  amtBoxArray: FormArray;
  //Loan Tenure 
  tenureArray: any = [];
  tenureBoxArray: FormArray;

  //Filter
  filter: any = [];

  form: FormGroup;

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.initializeData();
    this.buildForm();
  }

  buildForm() {

    this.amtBoxArray = new FormArray([]);
    for( let d in this.amtArray ) {
      this.amtBoxArray.push( new FormControl(( this.filter.indexOf( this.amtArray[d].label ) > -1 )))
    }
    this.tenureBoxArray = new FormArray([]);
    for ( let d in this.tenureArray ) {
      this.tenureBoxArray.push( new FormControl(( this.filter.indexOf( this.tenureArray[d].label ) > -1 )))
    }

    this.form = this._fb.group(
      { 'amtranges': this.amtBoxArray },
      { 'tenures' : this.tenureBoxArray }
      );

  }

  submitForm() {
    if( this.form.valid ) {
      this.filter = [];
      for( let db in this.amtBoxArray.controls ) {
        if( this.amtBoxArray.controls[ db ].value == true ) {
          this.filter.push( this.amtArray[ db ].label )
        }
      }
      for( let db in this.tenureBoxArray.controls ) {
        if( this.tenureBoxArray.controls[ db ].value == true ) {
          this.filter.push( this.tenureArray[ db ].label )
        }
      }
    }
  }

  initializeData() {
    amountRanges.forEach( range => {
      this.amtArray.push( range );
    });
    tenureRanges.forEach( range => {
      this.tenureArray.push( range );
    });
  }

}

我希望将选中的复选框标签放入过滤器数组中。问题是没有正确构建，并且提交按钮没有返回过滤器json。

Answer 1

你的错误就在这里：

this.form = this._fb.group(
  { 'amtranges': this.amtBoxArray },
  { 'tenures' : this.tenureBoxArray }
);

你的配置应该在第一个参数中，如：

this.form = this._fb.group({ 
  'amtranges': this.amtBoxArray,
  'tenures' : this.tenureBoxArray 
});

您还可以查看源代码

export class FormBuilder {
  /**
   * Construct a new {@link FormGroup} with the given map of configuration.
   * Valid keys for the `extra` parameter map are `validator` and `asyncValidator`.
   *
   * See the {@link FormGroup} constructor for more details.
   */
  group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any} = null): FormGroup {
    const controls = this._reduceControls(controlsConfig);
    const validator: ValidatorFn = extra != null ? extra['validator'] : null;
    const asyncValidator: AsyncValidatorFn = extra != null ? extra['asyncValidator'] : null;
    return new FormGroup(controls, validator, asyncValidator);
  }

Answer 2

以下是其中一种方式，

注意：这与Angular 2的表格控件（模板驱动或数据/表格驱动）不相近。

但是在Angular 2中实现并获得所选记录的替代方法。

<ul class="list-unstyled">
    <li *ngFor="let range of tenureRanges; let i = index">
        <input type="checkbox" [(ngModel)]="range.checked"> &#8377;{{range.name}} - &#8377;{{range.label}}
    </li>
</ul>



    let tenureRanges = [
      { id: 1, label: 'tenure6',  name:' 6 Months',checked:false },
      { id: 2, label: 'tenure12', name:'12 Months',checked:false  },
      { id: 3, label: 'tenure18', name:'18 Months',checked:false  },
      { id: 4, label: 'tenure24', name:'24 Months',checked:false  },
      { id: 5, label: 'tenure30', name:'30 Months',checked:false  },
      { id: 6, label: 'tenure36', name:'36 Months',checked:false  }
    ]

//在提交功能中，您可以执行此操作以获取所选值，它将返回已检查值的数组。

let arrayOfSelectedValue=this.tenureRanges.filter(f=>f.checked).map(f=>f.id);

Angular 2中的数组滤镜

2 个答案: