form 表单监听输入框值变化 - js、ts

日常开发中经常会用到 form 控件做一些操作，其中会涉及到一些动态监听某些控件数值参数发生改变而产生的相关联动操作，可以通过 valueChanges 的方式获取某些控件并进行订阅监听的操作，例如下面例子中所示：
对 form 表单中的 input 控件进行实时监听的操作；
首先，将控件创建完毕并对齐设置 formControlName 的 key 值；

<form (ngSubmit)="submitFormCellPhone()" [formGroup]="validateFormQuick" class="login-form" nz-form>
  <nz-form-item>
    <nz-form-control nzErrorTip="请输入手机号">
      <nz-input-group [nzPrefix]="prefixUser">
        <input formControlName="cellPhone" nz-input placeholder="手机号" type="text">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
</form>

其次，在 js、ts 中通过 valueChanges 的方式绑定(get) 对应的控件的 key 属性，例如如下 code 中的 get('cellPhone').valueChanges 所示；

ngOnInit(): void {
    this.validateFormQuick = this.fb.group({ // 获取短信登录表单数据
      cellPhone: [null, [Validators.required]],
      messageCode: [null, [Validators.required]]
    });
    this.validateFormQuick.get('cellPhone').valueChanges.subscribe( data => { // 监听获取验证码按钮是否可点击
      // 处理相关业务逻辑。。。
      console.log(data);
      if (data) {
        this.msgDisabledState = false;
      } else {
        this.msgDisabledState = true;
      }
    });
  }

最后，对其设置订阅监听(subscribe)的操作，随后处理相关业务即可。

初识前端 angular 也在一步步的匍匐爬行中，有什么不佳之处还请大神多多指点！

以上便是此次分享的全部内容，希望能对大家有所帮助！