Реактивная форма Angular 7 всегда недопустима при использовании css для автокапитализации обязательного поля, если пользователь не использует capslock и клавишу Shift

Question

У меня есть следующий ввод, который должен автоматически использовать заглавные буквы 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>

Код CSS:

.autoCapitalise{
  text-transform: uppercase
}

Теперь пользователь при наборе нескольких букв автокапитализируется, но формаостается недействительным, пока пользователь снова не использует колпачок или клавишу Shift.

Вот stackblitz , чтобы лучше описать проблему.

Answer 1

MDN - Атрибут autocapitalize не влияет на поведение при наборе текста на физической клавиатуре

Вы можете изменять базу значений на valueChanges каждый раз, когда пользователь вводит любойзначение изменится на верхний регистр

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

демонстрация стекаблиц