在Angular2(数据驱动)中使用属性作为形式验证器

Question

我很难使用Angular2中的数据驱动方法来设置最大值。我想将输入的最大值设置为一个名为UserLimit的属性，我从Firebase获得。这是我的代码：

component.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获取数据不起作用。

感谢您的帮助！

Answer 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();
    })
}

注意：未检查语法。