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

Question

这是在Angular中，我想使用变量来更改我的条件语句，这样我就不需要修改每个变量并再次键入这是输入标记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)}"
>

所以每次有新的输入，如姓名、电子邮件、oraganize等，我的代码都会改变

我想建立一个函数，我可以传递一些字符串，让它超级好，不修改所有的时间与长线。

  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>

这是一场有效的闪电战

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