如何将变量放入语句 [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)}"
>

因此，每当有新输入时，例如 name、email、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>

这是一个有效的 stackBlitz

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

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

How to put Variable in Statement [Angular, TypeScript]

html

variables

typescript

bootstrap-4

angular