Typescript 中的 Null 和 Undefined 检查 - Angular Forms答案

【问题标题】：Null and Undefined check in Typescript - Angular FormsTypescript 中的 Null 和 Undefined 检查 - Angular Forms
【发布时间】：2022-11-17 02:33:59
【问题描述】：

我对 Angular 应用程序的表单值进行了大量检查，我需要重构。

((this.dropdownSearchForm.get('name').value === undefined || this.dropdownSearchForm.get('name').value === null || this.dropdownSearchForm.get('name').value.length === 0) &&
    (this.dropdownSearchForm.get('status').value === undefined || this.dropdownSearchForm.get('status').value === null || this.dropdownSearchForm.get('status').value.length === 0) &&
    (this.dropdownSearchForm.get('address').value === undefined || this.dropdownSearchForm.get('address').value === null || this.dropdownSearchForm.get('address').value.length === 0) &&
    (this.dropdownSearchForm.get('edu').value === undefined || this.dropdownSearchForm.get('edu').value === null || this.dropdownSearchForm.get('edu').value.length === 0) &&
    (this.dropdownSearchForm.get('salary').value === undefined || this.dropdownSearchForm.get('salary').value === null || this.dropdownSearchForm.get('salary').value.length === 0));

我如何使用 Typescript utils 简化它以用最少的代码实现相同的结果？

注意：Angular forms touch 或 pristine 不起作用。因此，检查此逻辑以验证表单值。

我尝试检查类型，但由于某种原因它不起作用。

【问题讨论】：

“注意：Angular forms touch 或 pristine 不起作用。” - 你可以解释吗？ Truthy / Falsy 值可能会有所帮助。 docs
任何时候您使用 HTML 表单控件时，除非有默认值，否则您都有可能不存在该值。简而言之，没有办法静态验证用户输入之类的东西，直到运行时才可能知道。话虽这么说，HTML 表单内置了验证器，我不是一个有角度的开发人员，但该代码对我来说看起来很糟糕。

标签： javascript angular typescript

【解决方案1】：

因此看起来您正在检查每个表单的值是undefined、null 还是0。

您的条件似乎是在验证每个控件是否包含这些值之一。

由于这些值都是假的，我认为你可以这样做......

checkEm() {
  const vals = [
        this.dropdownSearchForm.get('name').value,
        this.dropdownSearchForm.get('status').value,
        this.dropdownSearchForm.get('address').value,
        this.dropdownSearchForm.get('edu').value,
        this.dropdownSearchForm.get('salary').value,
    ]
    // Make sure every value is falsy (!{falsy_value} = true):
    return vals.every(val => !val)
}

【讨论】：

【解决方案2】：

您可以尝试与此类似的操作：

 this.myForm = fb.group({
        field1: [null],
        field2: [null]
        // more fields 
    }, {validator: this.myValidator})

然后在您的验证器中迭代您组中的表单控件，总结并根据有效与否返回错误或空值：

 myValidator(group: FormGroup) {
      let sum = 0;
      for(let a in group.controls) {
        sum += group.get([a]).value;
      }
      return sum > 10 ? { notValid: true} : null
    }

在模板中，您可以显示错误：enter code here

*ngIf="myForm.hasError('notValid')"

【讨论】：

【解决方案3】：

基于Tanner's answer，您可以只传入密钥本身并让循环处理this.dropdownSearchFor.get(...).value 部分。

checkEm() {
  const vals = [
        'name',
        'status',
        'address',
        'edu',
        'salary'
    ]
    // Make sure every value is falsy (!{falsy_value} === true):
    return vals.every(val => !this.dropdownSearchForm.get(val));
}

根据问题的内容，您的原始代码似乎可能是错误的，因为您似乎想确保每个值都是真实的

该代码如下所示：

checkEm() {
  const vals = [
        'name',
        'status',
        'address',
        'edu',
        'salary'
    ]
    // Make sure every value is truthy:
    return vals.every(val => this.dropdownSearchForm.get(val));
}

【讨论】：

【解决方案4】：

请尝试使用此代码 sn-p：

(!this.dropdownSearchForm.get('name').value &&
!this.dropdownSearchForm.get('status').value &&
!this.dropdownSearchForm.get('address').value &&
!this.dropdownSearchForm.get('edu').value &&
!this.dropdownSearchForm.get('salary').value);

【讨论】：