javascript - 我怎样才能优化这个 Angular 代码？

Question

场景:

我有三个文本框，使用 Material 主题，如果文本框具有值，我需要在标签的类中插入一个类，以便它保留在文本框的顶部( float 标签)。目前，我所做的是，

代码:

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

首先，您不必通过为每个输入定义函数来观察输入元素的变化。在响应式(Reactive)形式中，您可以使用以下语法；

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

您还可以查看this .

其次，如果您想验证表单控件，可以使用Validators。只需在创建表单控件时设置即可；

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

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

有很多方法可以改变 Angular 中 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页。你需要的一切都已经写在那里了。