How to put Variable in Statement [Angular, TypeScript]-CodePudding

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?

CodePudding user response：

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/app/app.component.html