Angular 7 当使用 css 自动大写必填字段时，反应形式总是无效的，除非用户使用大写锁定和 shift 键

Question

我有以下输入，应该自动将字母 A、B 和 C 大写，而不让用户使用大写锁定或 shift+字母。

输入是反应形式：

SignupForm: FormGroup;
  ngOnInit(){
    this.SignupForm = new FormGroup({
      'username': new FormControl('', Validators.pattern('[A-C ]*'))
    });
}

这里是 html 表格：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
      <form [formGroup]="SignupForm">
             <label for="username">UserName</label>
             <input type="text" class="form-control autoCapitalise"
              id="username" formControlName = "username">
              {{SignupForm.controls.username.error || JSON}}
      </form>
    </div>
  </div>
</div>

CSS代码：

.autoCapitalise{
  text-transform: uppercase
}

现在用户输入几个字母时，自动大写可以工作，但表格仍然无效，直到用户再次使用大写锁定或 shift 键。

这里有一个stackblitz可以更好地描述问题。

Answer 1

MDN - The autocapitalize attribute doesn’t affect behavior when typing on a physical keyboard

您可以根据 valueChanges 更改值，每次用户输入任何值都会更改为大写

this.SignupForm.get('username').valueChanges
.pipe(distinct())
  .subscribe(value => {
    this.SignupForm.get('username').setValue(value.toUpperCase());
  })

stackblitz demo

Angular 7 当使用 css 自动大写必填字段时，反应形式总是无效的，除非用户使用大写锁定和 shift 键

Angular 7 reactive form is always invalid when using css to autocapitalize a required field unless user uses capslock and shift key

angular

angular-reactive-forms

angular6

angular7