在 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

问题是构造函数在 before 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();
    })
}

注意：未检查语法。

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

Use property as form validator in Angular2 (data-driven)

forms

angular

data-driven

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

Use property as form validator in Angular2 (data-driven)

forms

angular

data-driven

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