相关疑难解决方法(0)

如何使用嵌套表单组验证活动表单?

我正在创建一个嵌套表单组,如https://plnkr.co/edit/c93yFe2r83cvjiRvl6Uj?p=preview所示.

这是来自https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#reactive的示例分支

Angular中的示例显示validationMessages在表单没有任何嵌套组时使用.当我有嵌套表单组时,我不确定如何扩展它.以下是我要创建的示例表单和验证消息.

  buildForm(): void {
    this.heroForm = this.fb.group({
      'name': [this.hero.name, [
          Validators.required,
          Validators.minLength(4),
          Validators.maxLength(24),
          forbiddenNameValidator(/bob/i)
        ]
      ],
      'address': this.fb.group({
        'city': [''],
        'state': ['']
      }),
      'alterEgo': [this.hero.alterEgo],
      'power':    [this.hero.power, Validators.required]
    });

    this.heroForm.valueChanges
      .subscribe(data => this.onValueChanged(data));

    this.onValueChanged(); // (re)set validation messages now
  }
Run Code Online (Sandbox Code Playgroud)

预期formErrorsvalidationMessages

  formErrors = {
    'name': '',
    'power': '',
    'address': {
      'state': '',
      'city': ''
    }
  };

  validationMessages = {
    'name': {
      'required':      'Name is required.',
      'minlength':     'Name must be …
Run Code Online (Sandbox Code Playgroud)

typescript angular2-forms reactive-forms angular

5
推荐指数
1
解决办法
2351
查看次数