除非用户使用capslock和shift键，否则在使用css自动初始化必填字段时，Angular 7被动表单始终无效

我有以下输入，它应该自动大写字母A、B和C，而不允许用户使用capslock或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>

现在，当用户键入几个字母时，autocapitalize正在工作，但表单仍然无效，直到用户再次使用capslock或shift键

下面是一个更好地描述问题的示例

-autocapitalize属性不会影响在物理键盘上键入时的行为

每次用户输入值时，您都可以根据值更改来更改该值。任何值都将更改为大写

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

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