Angular:在(更改)事件上添加动态生成的输入字段数据时出现问题 [英] Angular: Issue in adding dynamically generated input field data on the (change) event

问题描述

我有一个功能，我需要在单击按钮时发送动态生成的输入字段.

为了更好地理解，我在 stackblitz 上重现了这个问题.

在那个应用程序中，当我输入 resourceQuantity 时，resourceId 字段是动态生成的.我的问题是单独识别这些字段并通过单击按钮将它们发送到服务器端.

我在stackblitz上找到的这个解决方案是类似的，但在我的问题我不是删除或添加按钮点击，而是(更改)事件.

这是 HTML 代码:

<input matInput type="number" formControlName="resourceQuantity" [(ngModel)]="resourceQuantity" placeholder="输入资源数量" (change)="somethingChanged()"/></mat-form-field><br/><br/><div><ul><li *ngFor="let item of counter(resourceQuantity)"><input matInput type="number" placeholder="输入资源编号" formControlName="resourceId"/>

这是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]})});}东西改变(){console.log(this.resourceQuantity);}计数器(我:数字){返回新数组(i)；}

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

解决方案

避免同时使用 ngModel 和 formControl.您可以在组件中使用 formArray 和 getter 函数来获取结果.

编辑:我已经编辑了我的代码以反映您通过订阅 resourceQuantity formControl 上的 valueChanges 请求的更改code> 并在检测到更改时生成 formArray.这会实时创建资源.

注意:不要忘记取消订阅 valueChanges 以防止内存泄漏.我已更新我的 Stackblitz 以显示相同内容.

这是一个关于 StackBlitz

的工作示例

I have a feature where I need to send dynamically generated input fields on button click.

I have recreated the problem on stackblitz for better understanding.

In that app, when I enter resourceQuantity, the resourceId fields are dynamically generated. My issue is to identify those fields individually and send them on server side on single button click.

This solution I've found on stackblitz is similar, but in my problem I am not removing or adding on button clicks, but (change) event instead.

Here is the HTML code:

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

And here is the TS code:

  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);
  }

Kindly let me know the best solution to my problem. Thanks.

解决方案

Avoid using ngModel and formControl together. You can make use of formArray along with getter functions in your component to get your result.

Edit: I have edited my code to reflect the change you requested by subscribing to valueChanges on the resourceQuantity formControl and generating the formArray when it detects the change. This creates the resources in real time.

Note: Don't forget to unsubscribe from valueChanges to prevent memory leakage. I have updated my Stackblitz to show the same.

Here is a working example on StackBlitz

这篇关于Angular:在(更改)事件上添加动态生成的输入字段数据时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！