Question

现在，我正在创建此formBuilder：

 return this.fb.group(
      {
        myaccount: [ '', [Validators.required]]
        }
    );

当我收到关于元素的错误消息时，我正在做的事情：

Object.keys(formToValidate.controls).forEach(key => {

      const controlErrors: ValidationErrors = formToValidate.get(key).errors;
      if (controlErrors != null) {
        Object.keys(controlErrors).forEach(keyError => {
          if (keyError === 'required') {

            console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
          }

        });
      }
    });

显示：按键控制：myaccount，keyError：必需，err值：true

问题是我不想显示“ myaccount”，而是“ My Account”。我尝试以某种方式做到这一点：

return this.fb.group(
      {
        myaccount: [ 'My Account','', [Validators.required]]
        }
    );

但这是不可能的。我该怎么办？

编辑：

我要显示标签（特定的一个）而不是表单上的值。我要为console.log自定义一个特定名称吗？

Answer 1

您基本上是在打印表单控件名称，并且想要显示值而不是FormControl名称。

在您的示例代码中，myaccount是FormControl名称，而My Account是FormControl值。

要显示FormControl值，您需要做的是：

Object.keys(formToValidate.controls).forEach(key => {

      const controlErrors: ValidationErrors = formToValidate.get(key).errors;
      if (controlErrors != null) {
        Object.keys(controlErrors).forEach(keyError => {
          if (keyError === 'required') {

            console.log('Key control: ' + formToValidate.get(key).value+ ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
          }

        });
      }
    });

Answer 2

对我有用。错误在于您正在打印formControl而不是值

Object.keys(formToValidate.controls).forEach(key => {

  const controlErrors: ValidationErrors = formToValidate.get(key).errors;
  if (controlErrors != null) {
    Object.keys(controlErrors).forEach(keyError => {
      if (keyError === 'required') {

        console.log('Key control: ' + key.value + ', keyError: ' + keyError + ', err value: 
  ', controlErrors[keyError]);
      }

    });
  }
});

Answer 3

考虑formGroup作为普通的javascript对象，其键是其控件名称，

const thisIsInvalid = {  My Account: 'Account Name'}

const thisIsValid = {'My Account': 'Account Name'}

return this.fb.group(
      {
        'My Account': [ '', [Validators.required]]
        }
    );

因此，将密钥名称从myAccount更改为“我的帐户”会产生错误，但不会将密钥名称从myAccount更改为“我的帐户”。希望有帮助。

Formbuilder反应性表单的自定义名称-Angular 7

3 个答案: