问题描述
限时送ChatGPT账号..我有一个功能,我需要在单击按钮时发送动态生成的输入字段.
为了更好地理解,我在 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屋!
更多推荐
[db:关键词]
发布评论