如何以角度2的动态形式对验证消息进行反应

陈eff

我正在学习角度2中的反应动力学形式。

我想验证诸如angular.io cookbook表单验证之类的消息。

像这样的东西:

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

所以我订阅了动态表单中的表单valuechanges

但是发生了奇怪的事情,例如:

我来自组中的两个地址,一个有效,两个无效。

因此错误消息应该是一个,但是结果是两个!

有人会帮忙解决这个问题吗?

这是运行文件

这是地址html和ts文件

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'address',
    templateUrl: 'address.component.html',
})
export class AddressComponent {
    @Input('group')
    public adressForm: FormGroup;
}
<div [formGroup]="adressForm">
    <div class="form-group col-xs-6">
        <label>street</label>
        <input type="text" class="form-control" formControlName="street">
        <small [hidden]="adressForm.controls.street.valid" class="text-danger">
            Street is required
        </small>
    </div>
    <div class="form-group col-xs-6">
        <label>postcode</label>
        <input type="text" class="form-control" formControlName="postcode">
    </div>
</div>

这是应用程序

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
import { Customer } from '../model/customer.model';

@Component({
    selector: 'customer-component',
    templateUrl: 'customer.component.html',
})
export class CustomerComponent implements OnInit {
    public customerForm: FormGroup;

    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.customerForm = this._fb.group({
            'name': ['', [Validators.required, Validators.minLength(5)]],
            'addresses': this._fb.array([])
        });

        // add address
        this.addAddress();

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

        this.onValueChanged(); // (re)set validation messages now
    }

    initAddress() {
        return this._fb.group({
            'street': ['', Validators.required],
            'postcode': ['']
        });
    }

    addAddress() {
        const control = <FormArray>this.customerForm.controls['addresses'];
        const addrCtrl = this.initAddress();

        control.push(addrCtrl);

    }

    removeAddress(i: number) {
        const control = <FormArray>this.customerForm.controls['addresses'];
        control.removeAt(i);
    }

    onSubmit() {

    }

    onValueChanged(data?: any) {

        const form = this.customerForm;

        for (const field in this.formErrors) {
            // clear previous error message (if any)

            const control = form.get(field);

            if (control instanceof FormArray) {

                const fmArray = <FormArray>control;
                console.log("from Array have count : " + fmArray.controls.length);
                this.formErrors[field] = [];

                fmArray.controls.forEach(g => this.formErrors[field].push(this.addressErrors));

                let groupIndex = 0;
                for (const groupItem of fmArray.controls) {
                    const group = <FormGroup>groupItem;

                    console.log("group index is here == " + groupIndex);

                    for (const ctrlField in this.addressErrors) {
                        const gpControl = group.controls[ctrlField];

                        this.formErrors[field][groupIndex][ctrlField] = '';

                        if (gpControl && gpControl.dirty && !gpControl.valid) {
                            const messages = this.validationMessages[ctrlField];
                            for (const key in gpControl.errors) {
                                console.log("control error key is here ==" + key);
                                this.formErrors[field][groupIndex][ctrlField] += messages[key] + ' ';

                                console.log("set value on object of key is here ==" + ctrlField)
                                console.log(this.formErrors[field][groupIndex]);
                            }
                        }

                    }
                    groupIndex++;
                }

            }
            else {
                this.formErrors[field] = '';
                if (control && control.dirty && !control.valid) {
                    const messages = this.validationMessages[field];
                    for (const key in control.errors) {
                        this.formErrors[field] += messages[key] + ' ';
                    }
                }
            }

        }
    }

    formErrors: any = {
        'name': '',
        'addresses': []
    };

    addressErrors: any = {
        'street': ''
    }

    validationMessages: any = {
        'name': {
            'required': 'Name is required.',
            'minlength': 'Name must be at least 4 characters long.'
        },
        'street': {
            'required': 'Street is required.',
        }
    };
}
<h1>
    Customer Dynamic Static Form Reactive</h1>
<form [formGroup]="customerForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="name">Name</label>

        <input type="text" id="name" class="form-control" formControlName="name">

        <div *ngIf="formErrors.name" class="alert alert-danger">
            {{ formErrors.name }}
        </div>
    </div>

    <!--addresses-->
    <div formArrayName="addresses">
        <div *ngFor="let address of customerForm.controls.addresses.controls; let i=index" class="panel panel-default">
            <div class="panel-heading">
                <span>Address {{i + 1}}</span>
                <span class="glyphicon glyphicon-remove pull-right" *ngIf="customerForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"></span>
            </div>
            <div class="panel-body" [formGroupName]="i">
                <address [group]="address"></address>
            </div>
        </div>
    </div>

    <div class="margin-20">
        <a (click)="addAddress()" style="cursor: default"> Add another address +
</a>
</div>

<div class="margin-20">
    <button type="submit" class="btn btn-primary pull-right" [disabled]="!customerForm.valid">Submit</button>
</div>
<div class="clearfix"></div>


<div class="margin-20">
    <pre>formErrors: <br>{{formErrors  | json}}</pre>
    <div>myForm details:-</div>
    <pre>Is myForm valid?: <br>{{customerForm.valid | json}}</pre>
    <pre>form value: <br>{{customerForm.value | json}}</pre>
</div>
</form>

html和ts文件

您是否尝试过修改onValueChangedAngular文档中概述方法?

onValueChanged(data?: any) {
  if (!this.heroForm) { return; }
  const form = this.heroForm.form;

  for (const field in this.formErrors) {
    // clear previous error message (if any)
    this.formErrors[field] = '';
    const control = form.get(field);

    if (control && control.dirty && !control.valid) {
      const messages = this.validationMessages[field];
      for (const key in control.errors) {
        this.formErrors[field] += messages[key] + ' ';
      }
    }
  }
}

formErrors = {
  'name': '',
  'power': ''
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何以角度2的形式显示验证消息?

来自分类Dev

如何以角度反应形式向 formModel 添加验证器

来自分类Dev

如何以角度反应形式验证日期字段?

来自分类Dev

如何获取角度形式验证错误消息?

来自分类Dev

角度动态反应形式的问题

来自分类Dev

如何在提交时以角度7反应形式申请验证?

来自分类Dev

在角度2中添加动态反应形式组

来自分类Dev

如何以xamarin形式在xaml中进行动态设计

来自分类Dev

为反应式角度形式的不同验证器显示不同的错误消息

来自分类Dev

以角度形式进行组验证

来自分类Dev

角反应形式验证消息未显示

来自分类Dev

角材料:如何以反应形式将所需的验证器设置为可选

来自分类Dev

如何以 angular 4 反应形式创建动态数组并将每个字段与输入(formControlName)绑定?

来自分类Dev

两个组件如何以角度 2 进行通信?

来自分类Dev

播放框架:如何以动态形式为特定字段设置错误消息

来自分类Dev

如何以Xamarin形式使用消息包

来自分类Dev

如何将表单输入动态添加到反应形式的角度

来自分类Dev

在编辑中具有反应形式问题的角度动态控件以及如何更新值

来自分类Dev

使用controllerAs语法进行角度形式验证

来自分类Dev

如何以Rails形式动态使用Rowspan

来自分类Dev

如何以html形式发送动态值?

来自分类Dev

如何以Xamarin形式动态更改CultureInfo

来自分类Dev

如何以html形式发送动态值?

来自分类Dev

以角度反应形式使用自定义验证器

来自分类Dev

角度:通过动态循环输入设置反应形式

来自分类Dev

Angular 2反应形式详细验证

来自分类Dev

Laravel 4-如何以JSON结构形式返回所有字段的所有验证错误消息?

来自分类Dev

角反应形式动态添加和删除控件并验证

来自分类Dev

我将如何以角度 4 动态填充 ng2-smart-table 的列

Related 相关文章

  1. 1

    如何以角度2的形式显示验证消息?

  2. 2

    如何以角度反应形式向 formModel 添加验证器

  3. 3

    如何以角度反应形式验证日期字段?

  4. 4

    如何获取角度形式验证错误消息?

  5. 5

    角度动态反应形式的问题

  6. 6

    如何在提交时以角度7反应形式申请验证?

  7. 7

    在角度2中添加动态反应形式组

  8. 8

    如何以xamarin形式在xaml中进行动态设计

  9. 9

    为反应式角度形式的不同验证器显示不同的错误消息

  10. 10

    以角度形式进行组验证

  11. 11

    角反应形式验证消息未显示

  12. 12

    角材料:如何以反应形式将所需的验证器设置为可选

  13. 13

    如何以 angular 4 反应形式创建动态数组并将每个字段与输入(formControlName)绑定?

  14. 14

    两个组件如何以角度 2 进行通信?

  15. 15

    播放框架:如何以动态形式为特定字段设置错误消息

  16. 16

    如何以Xamarin形式使用消息包

  17. 17

    如何将表单输入动态添加到反应形式的角度

  18. 18

    在编辑中具有反应形式问题的角度动态控件以及如何更新值

  19. 19

    使用controllerAs语法进行角度形式验证

  20. 20

    如何以Rails形式动态使用Rowspan

  21. 21

    如何以html形式发送动态值?

  22. 22

    如何以Xamarin形式动态更改CultureInfo

  23. 23

    如何以html形式发送动态值?

  24. 24

    以角度反应形式使用自定义验证器

  25. 25

    角度:通过动态循环输入设置反应形式

  26. 26

    Angular 2反应形式详细验证

  27. 27

    Laravel 4-如何以JSON结构形式返回所有字段的所有验证错误消息?

  28. 28

    角反应形式动态添加和删除控件并验证

  29. 29

    我将如何以角度 4 动态填充 ng2-smart-table 的列

热门标签

归档