代码之家 › 专栏 › 技术社区 › Avinash

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

angular-pipe angular-reactive-forms angular

Avinash · 技术社区 · 8 年前

我用的是内置的管子 标题酶 在输入字段上- 用户名 以反应形式。只有当我在输入字段中键入时,它才正常工作;当我从该输入字段的浏览器建议中选择时,它就不工作了,即使当我集中精力时。

应用组件.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(应用程序组件.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

2 回复 | 直到 8 年前

Haifeng Zhang 8 年前

第二次编辑: 检查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>

应用组件.ts:

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

当我将大写的“abc”复制到输入字段中时,它也会起作用。

Reza 8 年前

我使用了另一种方法,即订阅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>