Angular表单提交时控制器值为空问题排查及解决

提交Angular表单时，表单控制器中的userName值始终为空字符串，排查后确认问题出在HTML模板的拼写错误上。

组件TS代码（register.component.ts） #

export class RegisterComponent implements OnInit {
  constructor(
    private userService: UserService,
    private formBuilder: FormBuilder
  ) {}

  registerFormGroup: FormGroup;
  ngOnInit(): void {
    this.registerFormGroup = this.formBuilder.group(
      {
        userName: ['', [Validators.required]],
      },  
    );
  }

  submitted: boolean = false;
  async onSubmit(user: User) {
    this.submitted = true;
    debugger;

    if (this.registerFormGroup.invalid) return;

    const result: Create_User = await this.userService.create(user);
    if (result.succeeded) result.message, 'User registration successful.';
    else result.message, 'User registration not successful.';
  }
}

模板HTML代码（register.component.html） #

<div class="register-form">
  <div class="register-form-box">
    <div class="register-form-header" class="form-group">
      <h2>Sign Up</h2>
    </div>
    <form [formGroup]="registerFormGroup" (ngSubmit)="onSubmit(registerFormGroup.value)">
      <div class="input-text">
        <input type="text" formControlerName='userName' class="form-control" id="userName"
          placeholder="Enter Username" [ngClass]="{'is-invalid': submitted}" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

问题原因 #

HTML模板中输入框的表单绑定指令拼写错误：将正确的formControlName误写为formControlerName，导致输入框无法与表单控制器中的userName字段建立绑定关系，因此提交时该字段值始终为空字符串。

修正后的HTML代码 #

将输入框的指令名称修正为正确的formControlName即可解决问题：

<div class="register-form">
  <div class="register-form-box">
    <div class="register-form-header" class="form-group">
      <h2>Sign Up</h2>
    </div>
    <form [formGroup]="registerFormGroup" (ngSubmit)="onSubmit(registerFormGroup.value)">
      <div class="input-text">
        <input type="text" formControlName='userName' class="form-control" id="userName"
          placeholder="Enter Username" [ngClass]="{'is-invalid': submitted}" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Fatih Selvi