Angular 为输入字段选择浏览器建议时管道不工作

Question

我在输入字段上使用内置管道 titlecase - username 以反应形式。只有当我在输入字段中输入时它才能正常工作，而当我 select 来自该输入字段的浏览器建议时它不工作，即使我专注于它。

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>

当我打字时它工作正常

当我从浏览器 selecting 时 selection 它不工作
虽然我关注的是输入字段，但它仍然是大写的。

有人可以帮助我做错什么吗？

@Haifeng Zhang 这是我在问题中提到的场景，我在你的stackblitz demo

中复制了

Answer 1

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

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

Transforms text to title case. Capitalizes the first letter of each word, and transforms the rest of the word to lower case. Words are delimited by any whitespace character, such as a space, tab, or line-feed character.

第一次编辑：

我使用 tempref，它对我有用： Demo is here

app.component.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>

app.component.ts:

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

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

Answer 2

我使用了另一种订阅 valuechange 的方法

在 stackblitz

观看现场演示

constructor(private fb: FormBuilder, private titleCasePipe: TitleCasePipe) {
  }

  ngOnInit() {
    this.signupForm = this.fb.group({
      'userData': this.fb.group({
        'username': [null, [Validators.required]],
        'email': ['abc@test.com', [Validators.required, Validators.email]]
      }),
      'gender': ['male'],
      'hobbies': this.fb.array([])
    });

    this.signupForm.controls.userData.get('username').valueChanges.subscribe((val) => {
      this.signupForm.controls.userData.patchValue(
        {
          username: this.titleCasePipe.transform(val)
        }, 
        { emitEvent: false })
    })
  }

和

<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"
                  >
                  <span *ngIf="signupForm.get('userData.username').errors && signupForm.get('userData.username').errors['required']">
                      This field is required
                  </span>
          </div>
     </div>
     <button class="btn btn-primary" type="submit">Submit</button>
 </form>

Angular 为输入字段选择浏览器建议时管道不工作

Angular Pipe not working when selecting the browser suggestion for input field

angular

angular-reactive-forms

angular-pipe