Angular ControlValueAccessor 必需属性答案

【问题标题】：Angular ControlValueAccessor required attributeAngular ControlValueAccessor 必需属性
【发布时间】：2019-03-27 07:13:41
【问题描述】：

我有一个实现 ControlValueAccessor 的文本框控件。在表单中，我在表单字段名称上放置了一个必需的验证器：

 this.formGroup = this.fb.group({
        name: ['', Validators.required]
    });

在模板中我使用这样的控件：

<input-text formControlName="name"></input>

Angular 必需的验证有效，但内部文本框没有必需的属性。如果需要，我想设置此文本框的样式，我该如何完成？

【问题讨论】：

你试过喷油器解决方案了吗：stackoverflow.com/a/51126965/8945135
试过了，是的，现在我可以检查错误数组，但我想事先知道该字段是否需要，是否尚未验证，以及它是否已验证且有效。在 ControlValueAccessor 实现中，我如何知道控件是否具有必需的验证器？
我认为你不应该从组件内部考虑你有什么错误，你只需要检查是否有错误（必需或其他验证错误）并更改组件样式。这样，您的组件是通用的，并且可以在具有不同验证器的其他用例中使用。

标签： angular validation required controlvalueaccessor

【解决方案1】：

您需要检查表单控件的值变化，如下所示

this.control.valueChanges.subscribe(
            (res) => {
                this.setErrorMessage(this.control);
            }
        )

然后在setErrorMessage里面检查control.errors

if (control.errors) {
  for (let propertyName in control.errors) {
    if(propertyName == "required") {
      // you can do things here to your input field by using element reference
    }
  }
}

我创建了一个函数来知道输入字段是否为dirty=y

//Validate single field
export function isInputFieldDirty(controlName: string, formGroupObject: FormGroup) {
if (formGroupObject.get(controlName)) {
    return !formGroupObject.get(controlName).pristine &&
        ((formGroupObject.get(controlName).untouched && formGroupObject.get(controlName).dirty && formGroupObject.get(controlName).invalid) ||
            (formGroupObject.get(controlName).touched && formGroupObject.get(controlName).invalid))
        ? true : false;
}

}

【讨论】：

请告诉我为什么它被弃用了？？
谢谢我可以检查错误数组，但我想事先知道该字段是否需要，是否尚未验证，以及是否已验证且有效。在 ControlValueAccessor 实现中，我如何知道控件是否具有必需的验证器？
要检查控件是否有效，您可以使用 control.valid。我不确定 ControlValueAccessor 。另外，您为什么想了解控件上的验证器？我添加了一个功能，看看是否有帮助
因为我想在表单显示后立即显示哪些字段是必填字段。否则，用户必须先点击保存，然后发现某些字段是必需的，我认为最好事先显示哪些字段是必需的。我想错了吗？
是的，你的想法是对的，请检查这个链接：github.com/angular/angular/issues/13461，在这个“rodolfojnn”中已经给出了一个解决方案，你可以根据你的需要修改它

【解决方案2】：

如果您想在控件需要验证器的情况下设置该字段的样式，您可以使用此实用程序：

  isRequired(formControl: AbstractControl): boolean {
    return this.hasRequiredField(formControl);
  }
  hasRequiredField = (abstractControl: AbstractControl): boolean => {
    // caso formControl
    if (abstractControl.validator) {
      const validator = abstractControl.validator({} as AbstractControl);
      if (validator && validator.required) {
        return true;
      }
    } // caso formGroup
    if (abstractControl['controls']) {
      for (const controlName in abstractControl['controls']) {
        if (abstractControl['controls'][controlName]) {
          if (this.hasRequiredField(abstractControl['controls'][controlName])) {
            return true;
          }
        }
      }
    }
    return false;
  }

在你的控制器中

isRequired(formControlName){
    isRequired(formControlName: string): boolean {
        return this.utils.isRequired(this.form.get(formControlName));
    }
}

如果您想在字段无效时显示消息并应用样式，您可以简单地使用“有效”属性为了在字段无效时显示消息错误，将对象返回到 hasError('required')

现在如果你想要样式

<label> Name {{isRequired('name') ? '*' :'' }} </label>
<input-text formControlName="name" [ngClass]="{'required': isRequired('name'), 'notValid' : !this.form.get('name').valid  }"></input>

<span class="help-block error" *ngIf="((form.get('name').touched || form.get('name').dirty) && !form.get('name').valid)">
        <span *ngIf="form.get('name').hasError('required')">
            {{ 'ERROR_MSG.REQUIRED' | translate }}
        </span>
        <span *ngIf="form.get('name').hasError('maxlength')">
            {{ 'ERROR_MSG.MAXLENGTH' | translate }} {{getError('maxlength').requiredLength}}
        </span>
        <span *ngIf="form.get('name').hasError('minlength')">
            {{ 'ERROR_MSG.MINLENGTH' | translate }} {{getError('minlength').requiredLength}}
        </span>

        <span *ngIf="form.get('name').hasError('myCustomError')">
            {{ 'ERROR_MSG.CUSTOM' | translate }}
        </span>
    </span>
</div>

getError(error: string) {
    return this.form.controls['name'].errors[error];
  }

【讨论】：