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

Posted 2023-03-05

【中文标题】如何将变量放入语句 [Angular，TypeScript]

【英文标题】：How to put Variable in Statement [Angular, TypeScript]

【发布时间】：2021-12-12 03:37:22

【问题描述】：

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

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

【问题讨论】：

这应该是可能的，但发布更多代码可能会有所帮助（例如 this.f 是什么）。使用打字稿，您应该可以访问复杂类型，并且每个字段可能具有相同的类型。在您的示例中，姓名、电子邮件、地址都应该具有相同的类型，其中包含脏、无效的字段。感动。无需将名称传递给函数，只需传递对象本身 checkCondition(f.name)。然后在您的 checkCondition 函数中，您可以检查 thing.valid、thing.dirty 等...

指定您使用的内容对于获得问题的最佳答案很重要。我猜您可能正在以某种组合使用输入字段或表单。如果是这样的话，我很肯定这个网站上已经有问题和答案可以解决您的问题。也许这个？ ***.com/questions/43553544/…

哦，我忘记了：P，我添加了一些更必要的代码。看看吧！

不，我不明白那个帖子（可能是我去纽比@-@）但我认为这不是我的意思，但顺便说一句，非常感谢你:)

【参考方案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

【讨论】：

有意思，我试试

第一个看起来很不错，但第二个很好，但不能返回布尔值，因为你在这里有'is-invalid'组合->我尝试从布尔值更改为任何

哇，太棒了！你的代码工作得很好。但请从返回“布尔”编辑您的第二个块代码的“任何”:) 非常感谢

更多问题 Drake。 this.f[key] btw 是什么意思。我想知道该代码是如何工作的？

这被称为括号表示法。您应该只在尝试访问对象中的键并且该键是变量时使用它。这里有一篇好文章codeburst.io/…如果这对你有用，请标记为已接受的答案。