Question

情景：

我有三个文本框，使用材质主题，如果文本框有值，我需要在标签的类中插入一个类，使其保持在文本框的顶部（浮动标签）。目前，我所做的是，

代码：

HTML

    <div class="form-group form-group--float form-group--centered" [ngClass]="{'form-group--active': hasEmail}">
      <input type="email" class="form-control" formControlName="Email" (change)="emailTouched($event)">
      <label>Email Address</label>
      <i class="form-group__bar"></i>
    </div>

    <div class="form-group form-group--float form-group--centered" [ngClass]="{'form-group--active': hasPassword}">
      <input type="password" class="form-control" formControlName="Password" (change)="passwordTouched($event)">
      <label>Password</label>
      <i class="form-group__bar"></i>
    </div>

    <div class="form-group form-group--float form-group--centered" [ngClass]="{'form-group--active': hasCPassword}">
      <input type="password" class="form-control" formControlName="CPassword" (change)="cpasswordTouched($event)">
      <label>Confirm Password</label>
      <i class="form-group__bar"></i>
    </div>

TS

  emailTouched(ev: any) {
    if (ev.target.value !== '')
      this.hasEmail = true;
    else
      this.hasEmail = false;
  }
  passwordTouched(ev: any) {
    if (ev.target.value !== '')
      this.hasPassword = true;
    else
      this.hasPassword = false;
  }
  cpasswordTouched(ev: any) {
    if (ev.target.value !== '')
      this.hasCPassword = true;
    else
      this.hasCPassword = false;
  }

问题：

我讨厌重复，显然你可以看到，所有三个功能都在做同样的事情。我的问题是，我怎样才能使它成为一个单一的功能，并用不同的文本框做同样的事情？

任何建议都会有所帮助。感谢。

Answer 1

首先，您不必通过定义每个输入的功能来观察输入元素的更改。在反应形式中，您可以使用以下语法;

yourFormName.valueChanges.subscribe(i => {
     //do whatever you want
});

您还可以查看this。

其次，如果要验证表单控件，可以使用Validators。只需在创建表单控件时设置它;

yourFormControlName = new FormControl(null, [<any>Validators.required]);

您可以创建自己的验证器，这里是one tutorial。

有许多方法可以更改角度中的html元素类。在您的情况下，您可以这样做;

<div class="form-group form-group--float form-group--centered" [class.form-group--active]="CPassword.touched && CPassword.valid">
  <input type="password" class="form-control" formControlName="CPassword">
  <label>Confirm Password</label>
  <i class="form-group__bar"></i>
</div>

我建议您阅读reactive forms页面。你需要的一切都已经在那里写了。

Answer 2

由于您已经在使用被动表单，为什么不订阅valueChanges？此外，三元运算符肯定有帮助。

this.formName.controls.Email.valueChanges.subscribe(emailValue => {
    this.hasEmail = emailValue !== '' ? true: false;
});
this.formName.controls.Password.valueChanges.subscribe(password => {
    this.hasPassword = password !== '' ? true : false;
});
this.formName.controls.CPassword.valueChanges.subscribe(cPassword => {
    this.hasCPassword = cPassword !== '' ? true : false;
})

事实上，对于三元组，您只需检查更改的值是否真实：

this.formName.controls.Email.valueChanges.subscribe(emailValue => {
    //if emailValue is not empty, this.hasEmail is true
    this.hasEmail = emailValue !== '';
});

Angular Reactive Forms官方文档：https://angular.io/guide/reactive-forms

有关角度反应形式的更多信息：https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

加成：

看起来您想对输入进行一些有效性检查。您始终可以在FormControl。

中编写自己的自定义验证程序

Answer 3

点击Command pattern。你的代码看起来很适合它。

如何优化此角度代码？

3 个答案:

加成：