Question

我在为自定义输入组件进行验证时遇到了一些麻烦。我已经成功地为我的组件实现了“ControlValueAccessor”接口，它正确地填充了“FormGroup”对象;但是，除非我手动执行，否则不会触发验证。这是代码：

parent.component.html

<form role="form" [formGroup]="loginForm" (submit)="login($event)" class="c-login__panel u-marg-30">
  ...
  <ika-text-input formControlName="username" label="USERNAME" [invalid]="username.invalid && (username.dirty || username.touched)"></ika-text-input>
  <div class="u-marg-30"></div>
  <ika-text-input formControlName="password" label="PASSWORD" type="password" [invalid]="password.invalid && (password.dirty || password.touched)"></ika-text-input>
  <a href="" [routerLink]="['/login/forgot-password']" class="txt--link txt-s--s txt-w--l col-primary">{{ 'FORGOT_PASSWORD_QUESTION' | translate }}</a>      <br>

  <button type="submit" class="o-btn o-btn--primary o-btn--big u-marg-30" [disabled]="loginForm.pristine || loginForm.invalid">{{ 'ENTER' | translate }}</button>
</div>

parent.component

get username() { return this.loginForm.get('username'); }
get password() { return this.loginForm.get('password'); }
...
this.loginForm = _formBuilder.group({
  username: [null, Validators.required],
  password: [null, Validators.required]
});

使用此代码，无论我做什么更改，我的自定义输入的“invalid”属性始终保持为“false”。我的临时解决方案是：

this.loginForm.valueChanges.subscribe((el) => {
  el.forEach((control) => {
    if (control instanceof FormControl) {
      el.markAsDirty();
    }
  });
});

我绝对会避免使用上述内容，但我真的不知道为什么它不起作用。如上所述，只有验证器不起作用。

修改

ika-text-input包含：

<div class="o-input-group o-input-group--{{size || 'big'}}">
 <input #inputElement [(ngModel)]="inputValue" [id]="formControlName" 
 [type]="type || 'text'" [class.is-error]="invalid" [type]="type || 'text'" 
 class="o-input-group__field" (change)="onChange(inputElement.value)" 
 (focus)="inputFocus($event)" (blur)="inputBlur($event)">
 <label #labelElement [for]="formControlName" class="o-input-group__label 
 js-animated-label" [class.is-error]="invalid">{{ label | translate }}
 </label>
</div>

Angular 2反应形式不会触发自定义输入组件

0 个答案: