选择输入字段的浏览器建议时,Angular Pipe无法正常工作

Question

我在输入字段上使用内置管道标题 - 在被动形式的用户名.只有当我在输入字段中输入时它才能正常工作,当我从该输入字段的浏览器建议中选择它时它就无法正常工作,即使我集中注意力也是如此.

app.component.ts

ngOnInit() {
    this.signupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, [Validators.required, this.forbiddenNames.bind(this)]),
        'email': new FormControl('abc@test.com', [Validators.required, Validators.email], this.forbiddenEmails)
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    });
}

app.component.html

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <div formGroupName="userData">
        <div class="form-group">
           <label for="username">Username</label>
             <input
                  type="text"
                  id="username"
                  formControlName="username"
                  class="form-control"
                  [value]="signupForm.get('userData.username').value | titlecase">
                  <span *ngIf="signupForm.get('userData.username').errors['required']">
                      This field is required
                  </span>
          </div>
         ...
     </div>
     <button class="btn btn-primary" type="submit">Submit</button>
 </form>

当我打字时它工作正常

当我从浏览器选择中选择时它不起作用
虽然我从输入字段中聚焦它仍然是大写的.

有人可以帮助我做错了什么.

---

@Haifeng Zhang这是我在问题中提到的场景,我在你的stackblitz演示中复制了

Answer 1

第二次编辑： 检查 GIF 中的最后一个动作，我输入空格并ADD转换为Add

这就是titlecase工作原理，定义是：

将文本转换为标题大小写。将每个单词的第一个字母大写，并将单词的其余部分转换为小写。单词由任何空白字符分隔，例如空格、制表符或换行符。

第一次编辑：

我使用 tempref 它对我有用： 演示在这里

应用程序组件.html：

<form [formGroup]="signUpForm">
  <div formGroupName="userData">
    <label for="username">Username</label>
    <input type="text" formControlName="username" #username [value]="username.value | titlecase">
  </div>
  <pre>{{ signUpForm.value | json }}</pre>
</form>

应用程序组件.ts：

 constructor(public fb: FormBuilder) {
    this.signUpForm = this.fb.group({
      userData: this.fb.group({
        username: '',
        email: ''
      })
    });
  }

当我将大写“ABC”复制到输入字段时它也有效