Question

例如，我有这样的形式：

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <input type="text" formControlName="username">
  <div ngxErrors="username">
    <div ngxError="required" [when]="['dirty', 'touched']">
      Username is required
    </div>
  </div>

  <input type="text" formControlName="password">
  <div ngxErrors="password">
    <div ngxError="required" [when]="['dirty', 'touched']">
      Password is required
    </div>
    <div [ngxError]="['minlength', 'maxlength']" [when]="['dirty', 'touched']">
      5 characters minimum, 12 characters maximum
    </div>
  </div>

</form>

和这个控制器：

export class AppComponent implements OnInit {

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.form = this.fb.group({
      username: ['', [Validators.required]],
      password: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(12)]]
    });
  }

}

如何获得我的maxlength＆amp;最小长度值？所以我可以改变：

像这样的{p> 5 characters minimum, 12 characters maximum： {{form.get('username').minlength}} characters minimum, {{form.get('username').maxlength}} characters maximum

有可能吗？

Answer 1

我没有解决方案。您可以从错误本身获取minlength或maxlength，但不能同时获得两者。

要获得一个或另一个，您可以使用如下语法：

<div ngxErrors="username" #myError="ngxErrors">
    <div ngxError="minlength" when="dirty">
        Min length should be {{ myError.getError('minlength')?.requiredLength }}
    </div>
</div>

但这并不完全是您想要的，因为在上述情况下，当minlength验证器给出错误时，您无法访问maxlength的内容。起初我认为从表单控件中查找验证器是一件简单的事情。但显然这是一个角度不支持的功能：https://github.com/angular/angular/issues/13461

因此，我认为目前唯一可行的解决方案是创建自己的自定义验证器，它结合了minlength和maxlength验证，并设置了两者。

这是我的表现方式。我在验证器服务中创建了一个自定义验证器，如下所示：

＆＃13;

static minAndMaxLengthValidator(options): ValidatorFn {
  return (control: AbstractControl): {
    [key: string]: any
  } => {
    if (
      control.value.length > options.maxLength ||
      control.value.length < options.minLength
    ) {
      return {
        minAndMaxLengthError: options
      };
    }
    return null;
  }
}

＆＃13;

我将验证器设置为：

＆＃13;

    this.usernameOrEmail =
      new FormControl('', [
        Validators.required,
        ValidationService.minAndMaxLengthValidator({
          minLength: 2,
          maxLength: 12,
      })]);

＆＃13;

然后我可以在我的模板中同时显示minLength和maxLength（在这种情况下使用ngxErrors）

＆＃13;

    <md-input-container>
      <input
        mdInput 
        placeholder="Username or Email Address"
        formControlName="usernameOrEmail"
        required
      >
    </md-input-container>
    <div
      ngxErrors="usernameOrEmail"
      #usernameOrEmailError="ngxErrors"
    >
      <div
        ngxError="required"
        [when]="['dirty', 'touched']"
      >Username or Email Address is required</div>
      <div
        ngxError="minAndMaxLengthError"
        [when]="['dirty', 'touched']"
      >
        Username or Email Address must be min length
        {{
          usernameOrEmailError.getError('minAndMaxLengthError')?.minLength
        }}
        and max length
        {{
          usernameOrEmailError.getError('minAndMaxLengthError')?.maxLength
        }}
      </div>
    </div>

＆＃13;

希望这有帮助！

Angular2：获得验证器限制

1 个答案: