How to put Variable in Statement [Angular, TypeScript]

Question

This is in Angular, I want to use variable to change my conditional statement so I don't need to modify every variable and type again This is a code in input tag HTML .

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

.

    public form: FormGroup;
    private formBuilder: FormBuilder

.

   get f() { return this.form.controls; }

.

   this.form = this.formBuilder.group({
      id: ['00000000-0000-0000-0000-000000000000'],
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]],
      oraganize: ['', Validators.required],

    });

.

<input
    ...
    [ngClass]="{'is-invalid': f.name.invalid && (f.name.dirty || f.name.touched)}"
>

So my code will change every time when there is a new input such as name, email, oraganize, etc

I want to build a function that I can pass some string and make it super nice not to modify all the time with the long line. ex:

  public checkCondition(attribute: string): boolean{
    return (`this.f.${attribute}.invalid && (this.f.${attribute}.dirty || this.f.${attribute}.touched)`);
  }

so I can use as...

<input
    ...
    [ngClass]="{'is-invalid': checkCondition("name")}"
>

Please, So can I do it this way or not? or does it just works with only the string, not the condition?

Answer 1

it looks like you where very close. this should work.

public checkCondition(key: string): boolean{
    return this.f[key].invalid && (this.f[key].dirty || this.f[key].touched);
  }

or you can further simplify it

public checkCondition(key: string): boolean{
    return {
      'is-invalid': this.f[key].invalid && (this.f[key].dirty || this.f[key].touched) 
    };
  }

and you html

<input [ngClass]="checkCondition('name')" />

Here is what it would look like all together

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  form = this.formBuilder.group({
    id: ['00000000-0000-0000-0000-000000000000'],
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]],
    oraganize: ['', Validators.required],
  });

  constructor(private formBuilder: FormBuilder) {}

  checkCondition(key: string) {
    const control = this.form.get(key);

    if (!control) {
      return;
    }

    return {
      'is-invalid': control.invalid && (control.dirty || control.touched) 
    };
  }

}

<form [formGroup]="form">
  <input formControlName="id" [ngClass]="checkCondition('id')" />
  <input formControlName="name" [ngClass]="checkCondition('name')" />
  <input formControlName="email" [ngClass]="checkCondition('email')" />
  <input formControlName="oraganize" [ngClass]="checkCondition('oraganize')" />
</form>

Here is a working stackBlitz

https://stackblitz.com/edit/angular-ivy-cvwmis?file=src%2Fapp%2Fapp.component.html