角：问题中加入在（变化）事件动态地生成的输入字段数据(Angular: Issue in addin

2019-09-30 02:40发布

站内文章 / 后端开发

48 0

别忘想泡老子

女 | 书童

私信

我有一个功能，我需要发送按钮点击动态生成的输入字段。

我已经重新对这个问题stackblitz为了更好的理解。

在该应用程序，当我进入resourceQuantity，都是动态生成的资源ID字段。我的问题是单独地识别这些领域，并将它们发送服务器端的单按钮的点击。

这种解决方案我已经在stackblitz发现是相似的，但在我的问题，我不删除或添加按钮点击，但（其他城市）事件代替。

下面是HTML代码：

<mat-form-field>
    <input  matInput type="number" formControlName="resourceQuantity" [(ngModel)]="resourceQuantity" placeholder="Enter Resource Quantity" (change)="somethingChanged()"/> 
</mat-form-field><br/><br/>
<div>
    <ul>
        <li *ngFor="let item of counter(resourceQuantity)">
            <input  matInput type="number" placeholder="Enter Resource Number" formControlName="resourceId"/> 
        </li>       
    </ul>
</div>

这里是TS的代码：

  ngOnInit() {
    this.form = new FormGroup({
            'employeeId': new FormControl(null, {validators: [Validators.required]}),
            'employeeName': new FormControl(null, {validators: [Validators.required]}),
            'resourceQuantity': new FormControl(null, {validators: [Validators.required]}),
            'resourceId': new FormControl(null, {validators: [Validators.required]})
    });
  }

  somethingChanged() {
      console.log(this.resourceQuantity);
  }

  counter(i: number) {
      return new Array(i);
  }

请让我知道我的问题的最佳解决方案。谢谢。

Answer 1:

避免使用ngModel和formControl在一起。您可以使用formArray与getter函数沿着你的组件，让您的结果。

编辑：我已经编辑我的代码，以反映您通过订阅要求的变化valueChanges的resourceQuantity formControl并生成formArray当它检测到的变化。这在实时创建资源。

编辑：请不要忘记退订从valueChanges以防止内存泄漏。我已经更新了我的Stackblitz表现出同样的。

这里是一个工作示例StackBlitz

Answer 2:

你在这里什么是一个完美的使用情况formArray ...唯一的区别是，你需要添加formControls的基础上，其上的输入值resourceQuantity领域。

有关HTML：

<mat-card>
    <form [formGroup]="form" (submit)="add()">
        <mat-form-field>
            <input matInput type="number" formControlName="employeeId" placeholder="Enter Employee Id" (change)='updateFormString()'/>
      </mat-form-field><br/><br/>
      <mat-form-field>
            <input matInput formControlName="employeeName" placeholder="Enter Employee Name" (change)='updateFormString()'/>
      </mat-form-field><br/><br/>
      <mat-form-field>
            <input  matInput type="number" formControlName="resourceQuantity" [(ngModel)]="resourceQuantity" placeholder="Enter Resource Quantity" (change)="somethingChanged()"/> 
        </mat-form-field><br/><br/>
           <!--
             <div>
                <ul>
                    <li *ngFor="let item of counter(resourceQuantity)">
                        <input  matInput type="number" placeholder="Enter Resource Number" formControlName="resourceId"/> 
                    </li>       
                </ul>
            </div>
            -->
        <div fxLayout>
            <div>
                <button
                    mat-raised-button
                    color="accent" [disabled] = "form.invalid">Save
                </button>
            </div>
        </div>

        <div formArrayName='resourceId'>
          <br/>
          <div *ngFor='let item of resourceId.controls; let i = index'>
            <input type='text' [formControlName]="i" >
          </div>
        </div>

    </form>
</mat-card>

{{formString}}

有关TS：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  resourceQuantity: any;
  formString: string;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      'employeeId': new FormControl(null, { validators: [Validators.required] }),
      'employeeName': new FormControl(null, { validators: [Validators.required] }),
      'resourceQuantity': new FormControl(null, { validators: [Validators.required] }),
      //'resourceId': new FormControl(null, {validators: [Validators.required]}),
      resourceId: this.fb.array([
        this.fb.control('test entry default')
      ])
    });
  }

  updateFormString() {
    this.formString = JSON.stringify(this.form.value);
  }

  somethingChanged() {
    for (var i = 1; i < this.resourceQuantity; i++) {
      this.addResource();
    }
    this.updateFormString();
  }

  get resourceId() {
    return this.form.get('resourceId') as FormArray;
  }

  addResource() {
    this.resourceId.push(this.fb.control('test entry additional'));
  }

  counter(i: number) {
    return new Array(i);
  }
}

工作可在这里stackblitz

Answer 3:

我还设置我的员工模式，包括资源阵列;

import { Resource } from './resource.model';

export interface Employee {
    employeeId: number;
    employeeName: string;
    resourceQuantity: number;
    resourceIds: Resource[];
}

那么你的资源只需要一个ID：

export interface Resource {
    resourceId: number;
}

Answer 4:

您应该使用FormArray来解决这个问题。 StackBlitz演示

1.更改您的resourceId从FormControl到FormArray如下。

 'resourceId': new FormArray([])

2.Change您的counter的方法来推动FormControl在FormArray基础上的资源量 ，当变化事件在资源数量触发此方法调用。它得到resourceQuantity从价值FormGroup ，然后清除FormArray值。在此之后，它遍历该指数动态创建FormControl并将其推入FormArray

counter() {
    const index = parseInt(this.form.value.resourceQuantity);
    (this.form.controls.resourceId as FormArray).clear();
    for(let i = 0; i < index; i++) {
      const formControl = new FormControl();
      (this.form.controls.resourceId as FormArray).push(formControl);
    }
}

3.使用吸气剂容易地访问控件

  get formControls(): any {
    return this.form.controls;
  }

  get resourceIDControls(): any {
    return this.form.controls.resourceId['controls'];
  }

4.Change你的HTML遍历FormArray并设置FormControlName动态。

<div formArrayName="resourceId">
     <ul>
         <li *ngFor="let item of resourceIDControls; let i = index">
             <input  matInput type="number" placeholder="Enter Resource Number" [formControlName]="i"/> 
         </li>       
     </ul>
 </div>