使用formControlName绑定<ng-otp-input>无法获取值的问题

以下是针对该问题的具体排查和解决步骤：

1. 确认表单控件已正确初始化 #

确保你的usernameForm中已显式创建mobileotp控件，未初始化的控件无法与formControlName绑定生效：

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

// 组件类内代码
usernameForm: FormGroup;
config = {
  // 示例配置，根据需求调整
  length: 6,
  allowNumbersOnly: true,
  inputStyles: { 'width': '50px', 'height': '50px' }
};

constructor(private fb: FormBuilder) {
  // 初始化表单，必须包含mobileotp控件
  this.usernameForm = this.fb.group({
    mobileno: ['', Validators.required],
    mobileotp: ['', Validators.required]
  });
}

2. 手动同步OTP输入值到表单控件 #

部分版本的ng-otp-input可能存在Reactive Forms绑定的兼容性问题，可通过监听组件的onInputChange事件强制同步值：
修改模板中的ng-otp-input标签：

<ng-otp-input formControlName="mobileotp" [config]="config" (onInputChange)="syncOtpValue($event)"></ng-otp-input>

在组件类中添加同步方法：

syncOtpValue(otp: string) {
  // 将组件输出的OTP值手动设置到表单控件
  this.usernameForm.get('mobileotp')?.setValue(otp);
}

3. 检查组件版本与兼容性 #

如果使用的是旧版ng-otp-input，可能存在Reactive Forms绑定的bug。尝试更新组件到最新稳定版，或查阅组件官方文档确认是否需要额外配置项来支持formControlName绑定。

4. 验证表单取值逻辑 #

确认你在verifyMobile方法中的取值方式正确：

verifyMobile() {
  // 两种取值方式均可
  const otpValue1 = this.usernameForm.get('mobileotp')?.value;
  const otpValue2 = this.usernameForm.value.mobileotp;
  
  console.log('OTP值:', otpValue1, otpValue2);
  // 后续业务逻辑
}

内容的提问来源于stack exchange，提问作者Shreya Bhanot