Formbuilder被动表单的自定义名称-Angular 7

Question

现在我正在创建这个表单生成器：

 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，键错误：必需，错误值：true

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

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

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

编辑：

我想显示标签（特定的），而不是表单上的值。我想为我的控制台自定义一个特定的名称。日志

Answer 1

将Frame组视为一个普通的JavaScript对象，其关键是它的控制名，

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

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

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

因此，将密钥名称从myAccount更改为My Account会出现错误，但将密钥名称从myAccount更改为“My Account”不会。希望这有帮助。

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

基本上，您正在打印表单控件名称，并且希望显示值，而不是FormControlname。

在示例代码中，myaccount是FormControl名称，myaccount是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]);
          }

        });
      }
    });