如何优化此角度代码？

Question

Scenario :

I have three text boxes, using material theme, If the textbox has value, I need to insert a class in the label's class so that it stays on top of the textbox (floating labels). Currently, what I did was,

Code :

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

Issue :

I hate repetitions, clearly you can see, all the three functions are doing the same thing. My question is, how can I make it a single function and do the same thing with different text boxes?

Any advice would be helpful. Thanks.

Answer 1

First of all, you do not have to watch changes in your input elements with defining function per input. In reactive forms, you can use following syntax;

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

You can also take a look at this .

Secondly, if you want to validate your form control, you can use Validators . Just set it when you create your form control;

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

You can create your own validators, here is one tutorial .

There are many ways to change class of html elements in angular. In your case, you can do this;

<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>

I recommend you to read reactive forms page. Everything you need has already written over there.

Answer 2

Since you are already using reactive forms, why don't subscribe to the valueChanges ? Also, a ternary operator definitely helps.

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

In fact, for the ternary, you can just check if the value changed is truthy or not:

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

Angular Reactive Forms Official Docs: https://angular.io/guide/reactive-forms

More on Angular reactive forms: https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

Bonus:

Looks like you want to do some validity check on the inputs. You can always write your own custom validator in your FormControl .

Answer 3

Give a shot with Command pattern . Your code looks like a good candidate for it.