如何将变量放入语句 [Angular，TypeScript]

Question

这是在 Angular 中， 我想使用 variable 来改变我的 conditional statement 所以我不需要修改每个变量并再次输入 这是输入标记 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)}"
>

所以每次有新的输入（例如姓名、电子邮件、组织化等）时，我的代码都会改变

我想构建一个函数，我可以传递一些字符串，并让它变得超级好，不用一直用长线进行修改。 例如：

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

所以我可以用作...

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

请问，我可以这样做还是不这样做？还是仅适用于字符串，而不适用于条件？

Answer 1

看起来你离得很近。这应该工作。

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

或者你可以进一步简化它

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

你的html

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

这就是它的样子

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>

这是一个有效的stackBlitz

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