在 Angular2 中使用属性作为表单验证器（数据驱动）答案

【问题标题】：Use property as form validator in Angular2 (data-driven)在 Angular2 中使用属性作为表单验证器（数据驱动）
【发布时间】：2017-09-12 17:15:11
【问题描述】：

我很难尝试使用 Angular2 中的数据驱动方法设置最大值。我想将输入的最大值设置为从 firebase 获得的名为 userLimit 的属性。这是我的代码：

组件.ts

import { Component, OnInit, AfterViewInit  } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from "@angular/forms";
import { FiredbService } from '../services/firedb.service';
import { AuthService } from '../services/auth.service';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';

@Component({
  selector: 'my-dashboard',
  styleUrls: ['./recibirpago.component.scss'],
  templateUrl: './recibirpago.component.html'
})
export class RecibirpagoComponent implements OnInit, AfterViewInit {

  myForm2: FormGroup;
  uid: string;
  userLimit: any;

  constructor(private fb: FormBuilder,
              private dbfr: FiredbService,
              private db: AngularFireDatabase,
              private authService: AuthService) {

     this.myForm2 = this.fb.group({
      email: ['', Validators.email],
      clpmount: ['', [Validators.required, Validators.max(this.userLimit)]]
      });

   }

ngOnInit() {
    this.uid = this.authService.getUserUid();
} 

ngAfterViewInit() {
  this.dbfr.getUserLimit(this.uid).subscribe(snapshot => {          
    this.userLimit = snapshot.val().accountLimit;
    console.log(this.userLimit);
    })
}

例如，如果我编写 Validators.max(5000)，它可以工作，但如果我尝试从 Firebase 获取数据，它就无法工作。

感谢您的帮助！

【问题讨论】：

在构造函数中通过 formbuilder 创建表单之前尝试获取 userLimit 的值

标签： forms angular data-driven

【解决方案1】：

问题在于构造函数在 ngAfterViewInit 之前执行，因此此时您没有 userLimit 的值。

改为在获取数据的订阅中使用setVAlidators 方法。

类似这样的：

构造函数

 this.myForm2 = this.fb.group({
  email: ['', Validators.email],
  clpmount: ['', Validators.required]  // <-- not here
  });

ngAfterViewInit

ngAfterViewInit() {
  this.dbfr.getUserLimit(this.uid).subscribe(snapshot => {          
    this.userLimit = snapshot.val().accountLimit;
    console.log(this.userLimit);
    const clpControl = this.myForm2.get(`clpmount');
    clpControl.setValidators(Validators.max(this.userLimit)); // <-- HERE
    clpControl.updateValueAndValidity();
    })
}

注意：未检查语法。

【讨论】：