如何优化此角度代码？

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
});

您也可以看看这个 。

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

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

您可以创建自己的验证器，这是一个教程 。

有很多方法可以更改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>

我建议您阅读反应形式页面。 您所需的一切都已经写在那了。

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反应形式官方文档： https : //angular.io/guide/reactive-forms

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

奖金：

看起来您想对输入进行一些有效性检查。 您始终可以在FormControl编写自己的自定义验证器。

Answer 3

用Command模式射击。 您的代码看起来像是一个不错的选择。