Angular2 自定义表单验证器在类中无法访问“this”

typescript

在使用Angular2进行表单验证时，有时我们会遇到一个问题：在自定义验证器的类中无法访问"this"。这是因为自定义验证器是一个静态方法，它没有访问类实例的权限。然而，我们可以通过一些技巧来解决这个问题。

一个常见的场景是，我们需要在自定义验证器中访问表单控件的值，以便进行验证。例如，我们希望比较两个密码输入框的值是否相同。下面是一个简单的示例代码：

typescript
import { ABStractControl } from '@angular/forms';
export class CustomValidator {
  static passwordMatch(control: ABStractControl): { [key: string]: boolean } | null {
    // 这里无法访问"this"，无法获取到表单控件的值
    // 但是我们可以通过传递另外一个参数来获取控件的值
    const password = control.get('password').value;
    const confirmPassword = control.get('confirmPassword').value;
    if (password !== confirmPassword) {
      return { passwordMatch: true };
    }
    return null;
  }
}

在上面的例子中，我们定义了一个静态方法passwordMatch作为自定义验证器。然而，在方法内部无法通过this来访问表单控件的值。为了解决这个问题，我们可以修改验证器的签名，接受一个额外的参数来传递控件的值。

typescript
static passwordMatch(passwordControlName: string, confirmPasswordControlName: string) {
  return (control: ABStractControl): { [key: string]: boolean } | null => {
    const password = control.get(passwordControlName).value;
    const confirmPassword = control.get(confirmPasswordControlName).value;
    if (password !== confirmPassword) {
      return { passwordMatch: true };
    }
    return null;
  };
}

在修改后的代码中，我们将passwordControlName和confirmPasswordControlName作为参数传递给自定义验证器，并返回一个函数作为验证器的实际逻辑。这样，我们就可以在返回的函数内部访问控件的值，并进行验证。

下面是如何在模板中使用自定义验证器的示例代码：

html
<form [formGroup]="form">
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" formControlName="password">
  </div>
  <div>
    <label for="confirmPassword">确认密码：</label>
    <input type="password" id="confirmPassword" formControlName="confirmPassword">
  </div>
  <div *ngIf="form.hasError('passwordMatch', 'confirmPassword')">
    密码不匹配
  </div>
  <button type="submit" [disabled]="form.invalid">提交</button>
</form>

typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomValidator } from './custom-validator';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.CSS']
})
export class FormComponent implements OnInit {
  form: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.form = this.formBuilder.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, {
      validator: CustomValidator.passwordMatch('password', 'confirmPassword')
    });
  }
}

在上面的示例中，我们定义了一个包含两个密码输入框的表单，并使用自定义验证器来比较两个密码是否相同。如果密码不匹配，我们会在页面上显示一个错误信息。

在使用Angular2进行表单验证时，我们可能会遇到无法在自定义验证器类中访问"this"的问题。然而，我们可以通过传递额外的参数来解决这个问题，以便在验证器中访问表单控件的值。以上是一个简单的示例，演示了如何在自定义验证器中比较两个密码输入框的值是否相同。