如何在陳述句中放置變數[Angular,TypeScript]-有解無憂

這是在 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")}"
>

請問，我可以這樣做嗎？或者它只適用于字串，而不適用于條件？

uj5u.com熱心網友回復：

看起來你很近的地方。這應該有效。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/339904.html

標籤：html 有角的打字稿变量 bootstrap-4

上一篇：def()中未定義變數

下一篇：如何在KQL中使用變數？