Question

我在输入字段用户名中以反应形式使用内置管道 titlecase 。仅当我在输入字段中键入内容时，它才能正常工作，而当我从浏览器建议中选择输入字段时，即使我集中精力，也无法正常工作。

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>

当我打字时，它工作正常

当我从浏览器选择中选择时，它不起作用
尽管我把重点放在输入字段之外，但它仍然是大写的。

有人可以帮忙解决我在做什么。

@张海峰这是我在问题中提到的场景，我在您的stackblitz demo中复制了该场景

Answer 1

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

titlecase就是这样，定义是：

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

第一次编辑：

我使用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

我使用了另一种方法来订阅价值变更

在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 Pipe无法正常工作

2 个答案: