Angular无法通过[(ngModel)]获取由JavaScript更改的输入值。
创始人
2024-10-30 02:00:40
0

使用Angular中的Reactive Forms来解决这个问题。可以使用FormControl来捕获和管理表单中的值,而不是通过[(ngModel)]来获取输入值。下面是一个示例代码:

HTML文件:

TypeScript文件:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor() { }

  ngOnInit(): void {
    this.myForm = new FormGroup({
      inputValue: new FormControl('')
    });
  }

  onInputChange(): void {
     const inputValue = 'new value';
     this.myForm.get('inputValue').setValue(inputValue);
  }
}

在上面的代码中,我们使用了FormControl来捕获和管理输入值。在组件的ngOnInit函数中,我们创建了一个名为myForm的FormGroup并将其分配给组件的属性。在模板中,我们指定FormGroup中的表单控件名称作为formControlName指令的属性值。此外,还可以使用setValue函数来更改输入框的值,在此示例中,我们通过onInputChange函数将输入框的值更改为'new value”。

这种方法比使用[(ngModel)]来获取和更改输入值更加灵活和可靠。

相关内容

热门资讯

教程辅助!闲逸辅助软件下载苹果... 教程辅助!闲逸辅助软件下载苹果,四川熊猫辅助软件视频,详细插件(发现有挂)一、闲逸辅助软件下载苹果游...
传递经验!八闽福建辅助,开心庄... 传递经验!八闽福建辅助,开心庄园脚本辅助器,详细软件(有挂讲解)1、开心庄园脚本辅助器透视辅助软件激...
科技通报!堆金城陕西辅助器,朋... 您好,朋朋政和510k辅助器这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302】...
玩家必看!多乐辅助app,拼十... 玩家必看!多乐辅助app,拼十辅助器,详细插件(有挂讲解)拼十辅助器能透视中分为三种模型:拼十辅助器...
推荐十款!授权二厅辅助,决战十... 推荐十款!授权二厅辅助,决战十水三辅助,详细教程(有挂教程)1、让任何用户在无需决战十水三辅助安装教...
玩家攻略推荐!潮汕掌上娱破解,... 玩家攻略推荐!潮汕掌上娱破解,途游辅助软件网站,详细教程(果真有挂)1、操作简单,无需途游辅助软件网...
技术分享!江西中至科技,打两圈... 技术分享!江西中至科技,打两圈怀疑有外挂,详细软件(有挂讲解)1、金币登录送、破产送、升级送、活动送...
我来教大家!玫瑰大厅辅助,乐乐... 我来教大家!玫瑰大厅辅助,乐乐围棋入门脚本,详细工具(详细教程)1、操作简单,无需乐乐围棋入门脚本手...
玩家亲测!超级三加一视频,八闽... 玩家亲测!超级三加一视频,八闽掌上十八卦脚本,详细器(有挂存在)1、用户打开应用后不用登录就可以直接...
关于!哥哥打大a辅助,微信微乐... 关于!哥哥打大a辅助,微信微乐辅助透视,详细技巧(有挂头条)1、微信微乐辅助透视破解器简单,微信微乐...