在Angular2中使用property作为表单验证器(数据驱动)

时间:2017-09-12 17:15:12

标签: forms angular data-driven

我很难在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获取数据它不起作用。

感谢您的帮助!

1 个答案:

答案 0 :(得分: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();
    })
}

注意:未检查语法。