Question

我使用反应形式，我有多个输入，我想显示三个输入的单个错误，验证是;字段是必填字段，不应输入空格。

component.html：

    <form [formGroup]="contratoForm" class="campo-form">
        <div class="campoFormulario">
            <label class="etiquetaFormulario" for="txtCodigoContrato">Código contrato</label>
            <div style="display:inline-block; position: relative;"  class="control">
                <input [formControl]="txtCodigoContrato" type="text" id="txtCodigoContrato" name="txtCodigoContrato" class="cajaTexto ancho80" />
                <span>/</span>
            </div>                
            <div style="display:inline-block; position: relative;" class="control">                
                <input [formControl]="txtCodigoContrato2" type="text" id="txtCodigoContrato2" name="txtCodigoContrato2" class="cajaTexto ancho80" />              
            </div>
        </div>
        <div class="campoFormulario">
            <label class="etiquetaFormulario" for="txtContrato">Contrato</label>
            <div style="display:inline-block; position: relative;" class="control">
                <input [formControl]="txtContrato" type="text" id="txtContrato" name="txtContrato" class="cajaTexto ancho350" />

            </div>
        </div>
         <div *ngIf="((!txtCodigoContrato.valid && (txtCodigoContrato.dirty || txtCodigoContrato.touched)) && (txtCodigoContrato.hasError('required') || txtCodigoContrato.hasError('hasWhites')))
                ||
                ((!txtCodigoContrato2.valid && (txtCodigoContrato2.dirty || txtCodigoContrato2.touched)) && (txtCodigoContrato2.hasError('required') || txtCodigoContrato2.hasError('hasWhites')))
                ||
         ((!txtContrato.valid && (txtContrato.dirty || txtContrato.touched)) && (txtContrato.hasError('required') || txtContrato.hasError('hasWhites')))
                ">

            <span>check the fields in red, they are required</span>    
        </div>              
        <div class="buttons">
            <button class="btn btn-primary boton" type="button" style="float:right;" (click)="onCloseLink()">
                <span class="glyphicon glyphicon-off"></span> Cancel
            </button>

            <button class="btn btn-primary boton" type="button" style="float:right;" (click)="limpiar()">
                <span class="glyphicon glyphicon-trash"></span> Clean
            </button>
            <button type="submit" [disabled]="!contratoForm.valid" class="btn btn-primary boton" style="float:right;" (click)="onClick()">
                <span class="glyphicon glyphicon-floppy-disk"></span> Save
            </button>
        </div>
    </form>

component.ts：

    import { Component, HostBinding, OnDestroy, OnInit, Input, Output, EventEmitter, ElementRef, NgModule, ViewChild, ChangeDetectorRef  } from '@angular/core';
    import { Validators, FormBuilder, FormControl, FormGroup, AbstractControl} from '@angular/forms';
    import { AfterViewChecked } from '@angular/core/src/metadata/lifecycle_hooks';

    @Component({
        selector: 'app-formulario-contrato',
        templateUrl: './contrato.component.html',
        styleUrls: ['./contrato.component.css'] 
    })
    export class FormularioContratoComponent  {

        contratoForm: FormGroup;  

        constructor(private elRef: ElementRef, private formBuilder: FormBuilder, private cdRef: ChangeDetectorRef) {     
            this.createForm();           
        }

        txtCodigoContrato = new FormControl('', [
            Validators.required
            ,this.hasNotWhites
        ]);
        txtCodigoContrato2 = new FormControl('', [
            Validators.required
            , this.hasNotWhites
        ]);
        txtContrato = new FormControl('', [
            Validators.required
            , this.hasNotWhites
        ]);

        createForm() {
            this.contratoForm = this.formBuilder.group({
                txtCodigoContrato: this.txtCodigoContrato
                ,txtCodigoContrato2: this.txtCodigoContrato2
                ,txtContrato: this.txtContrato           
            });
        }  

        hasNotWhites(fieldControl: FormControl) {
            if (fieldControl.value.trim() != '') {
                return null
            }
            else {
               return { hasWhites: true };
            }          
        }

        ngAfterViewChecked() {
            this.cdRef.detectChanges();
        }

        limpiar() {   
        }

        onClick() {
            return null;
        }

component.css：

/* some stuff...*/
:host /deep/ .control input.ng-invalid.ng-touched {
  border-color: #ff8080;
}

验证工作正常，也就是说，当字段保持为空或输入空格时，它们会跳转。我的问题是我必须添加更多的表单控件，如果它包含的消息可以变得难以辨认：

  <div *ngIf="((!txtCodigoContrato.valid && (txtCodigoContrato.dirty || 
  txtCodigoContrato.touched)) && (txtCodigoContrato.hasError('required') || 
  txtCodigoContrato.hasError('hasWhites')))
                ||
                ((!txtCodigoContrato2.valid && (txtCodigoContrato2.dirty || 
  txtCodigoContrato2.touched)) && (txtCodigoContrato2.hasError('required') || 
  txtCodigoContrato2.hasError('hasWhites')))
                ||
         ((!txtContrato.valid && (txtContrato.dirty || txtContrato.touched)) 
  && (txtContrato.hasError('required') || txtContrato.hasError('hasWhites')))
                ">

是否有任何方法可以通过typescript控制这些值，也就是说，每次控件中的值发生更改时，它都会被typeScript中的函数控制，该函数返回true或false，并且只在我的函数中询问该函数的值DIV？

Answer 1

您可以执行类似

的操作

this.contratoForm.valueChanges.subscribe(value = > //do something)

如果你想要，你可以之前添加一个地图功能，只从你关心的表格中获取正在改变的值

this.contratoForm.valueChanges
.map(values => values.txtCodigoContrato)
.subscribe(txtCodigoContrato = > //do something)

Answer 2

尝试使用valueChanges和Array.some()函数

hasError: boolean = false;

constructor(private elRef: ElementRef, 
            private formBuilder: FormBuilder, 
            private cdRef: ChangeDetectorRef) {     
  this.createForm(); 

  // listen to all changes on the form
  this.contratoForm.valueChanges.subscribe(_ => {
    const controllersToCheck = [
      'txtCodigoContrato', 
      'txtCodigoContrato2', 
      'txtContrato'
    ];
    this.hasError = controllersToCheck.some(ctrlName => {
      let ctrl = this.contratoForm.get(ctrlName);
      return (ctrl.dirty || ctrl.touched) &&
             (ctrl.hasError('required') || ctrl.hasError('hasWhites'));
    });
  });          
}

（检查!ctrl.valid是多余的，因为如果控制器有错误，那么它是无效的）

HTML：

<div *ngIf="hasError">
  <span>check the fields in red, they are required</span>    
</div>

<强>更新

如上所述here

你也可以听验证状态为时，将通知{@link AbstractControl＃statusChanges statusChanges} 重新计算。

我认为它会更适合您的情况，因此请尝试订阅statusChanges事件（而不是valueChanges）：

this.contratoForm.statusChanges.subscribe( ..........

更新2

在HTML中使用一个函数：

<div *ngIf="hasErrors()">
  <span>check the fields in red, they are required</span>
</div>

将此功能添加到组件ts文件中：

hasErrors() {
  const controllersToCheck = [
    'txtCodigoContrato', 
    'txtCodigoContrato2', 
    'txtContrato'
  ];
  return controllersToCheck.some(ctrlName => {
    let ctrl = this.contratoForm.get(ctrlName);
    return (ctrl.dirty || ctrl.touched) && 
           (ctrl.hasError('required') || ctrl.hasError('hasWhites'));
  });
}

我创建了STACKBLITZ

如果添加具有相同验证逻辑的新控制器，只需将其控件名称添加到controllersToCheck数组

如何使用Angular5

2 个答案: