如何優化此角度代碼？

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模式射擊。 您的代碼看起來像是一個不錯的選擇。