如何在Angular 2中检查响应式表单中的任何控件是否有值

Question

我可以为您翻译，请看以下内容：

我有一个表单，其中有4-5种不同类型的控件。 在某些用户操作时，无论表单处于原始状态还是编辑状态，我都需要知道任何控件是否具有任何值。我不能依赖表单状态来做这件事。 我甚至无法遍历此.myForm.controls，因为它不是数组类型。此外，即使没有控件的值，this.myForm.value始终是'object'。

如果有帮助，请查看以下表单创建代码：

this.searchForm = this.fb.group({
            'ids': this.fb.control([], multipleInputValidator(2)),
            'locationName': this.fb.control([], Validators.minLength(2)),
            'accountCodes': this.fb.control([], multipleInputValidator(2)),
            'regionCodes': this.fb.control([], multipleInputValidator(2)),
            'city': this.fb.control([], Validators.minLength(2)),
            'typeIds': this.fb.control([]),
            'centreIds': this.fb.control([]),
            'siteCodes': this.fb.control([]),
            'statusCode': this.fb.control([]),
            'from': this.fb.control([]),
            'to': this.fb.control([])
        });

- nilanjan

Answer 1

你可以使用Object.keys()，快速检查这个问题。

Object.keys(this.searchForm.value).some(k => !!this.filterForm.value[k])

这将检查代表您的表单状态的value对象中的属性，并在其中任何一个属性是真值（即具有值）时返回true。

- peregrination

---

这里用 Object.values 不比获取键再返回值更合理吗？ - bryan60

@bryan60 是的，那是个好点子。Object.values 更有意义，但是它不被 IE 支持，而 Object.keys 则被支持。 - peregrination

如果你不必再支持IE浏览器的话，我认为你就不应该这么做。但如果你是那些不得不（或者只是想要）支持IE浏览器的人之一，那么你应该使用polyfill而不是让整个项目受限。Angular使这变得非常容易。 - bryan60

Answer 2

console.log(!!this.myForm.get('mycontrol').value);

- Günter Zöchbauer

---

我需要对所有控件进行操作，但无法循环操作，因为this.myForm.controls不是数组类型。此外，即使其中没有任何控件的值，this.myForm.value始终是一个“对象”。 - nilanjan

抱歉，如果问题对您来说不够详细，但我认为这是一个通用的问题，不需要任何代码。不确定您正在寻找什么类型的代码。 - nilanjan

好的，已经编辑了问题并附上了表单创建代码，HTML应该是隐含的。澄清一下问题，有没有办法知道表单控件中是否有值。不是单个控件，而是所有控件。 - nilanjan

жӮЁеҸҜд»ҘдҪҝз”Ёthis.searchForm.values并жЈҖжҹҘд»»дҪ•еұһжҖ§жҳҜеҗҰеҢ…еҗ«еҖјгҖӮжӮЁеҸҜд»ҘдҪҝз”ЁObject.keys()иҺ·еҸ–з»“жһңеҖјеҜ№иұЎзҡ„еұһжҖ§гҖӮ - Günter Zöchbauer

我建议使用Object.values(form.controls).some(({ value }) => !!value || value === 0)，这是对建议的键值方法的一种变体，更加直接并且将0视为有效值。 - Aluan Haddad

如果答案包含至少简要说明而不是没有注释的代码行，那么它会获得很多好处。 - planetmaker

Answer 3

checkFormChanges() {
this.searchForm.valueChanges
  .filter(() => this.searchForm.valid)
  .map((value) => {
    for (let key in value) {
      if (value[key]) {
        switch (key) {
          case 'whatever': //do something
        }
      }
    }
  }).subscribe();

}

这将循环遍历表单组并检查每个控件的有效值，然后您可以在各种情况下对其进行处理。

希望它有所帮助。

- UofABBallCoder626