如何使用 Angular5 检查表单控件的更改

Question

我使用反应式表单，我有多个输入，我想为三个输入显示一个错误，验证是；字段为必填字段，不得输入空格。

\n\n

组件.html：

\n\n

    <form [formGroup]="contratoForm" class="campo-form">\n        <div class="campoFormulario">\n            <label class="etiquetaFormulario" for="txtCodigoContrato">C\xc3\xb3digo contrato</label>\n            <div style="display:inline-block; position: relative;"  class="control">\n                <input [formControl]="txtCodigoContrato" type="text" id="txtCodigoContrato" name="txtCodigoContrato" class="cajaTexto ancho80" />\n                <span>/</span>\n            </div>                \n            <div style="display:inline-block; position: relative;" class="control">                \n                <input [formControl]="txtCodigoContrato2" type="text" id="txtCodigoContrato2" name="txtCodigoContrato2" class="cajaTexto ancho80" />              \n            </div>\n        </div>\n        <div class="campoFormulario">\n            <label class="etiquetaFormulario" for="txtContrato">Contrato</label>\n            <div style="display:inline-block; position: relative;" class="control">\n                <input [formControl]="txtContrato" type="text" id="txtContrato" name="txtContrato" class="cajaTexto ancho350" />\n\n            </div>\n        </div>\n         <div *ngIf="((!txtCodigoContrato.valid && (txtCodigoContrato.dirty || txtCodigoContrato.touched)) && (txtCodigoContrato.hasError(\'required\') || txtCodigoContrato.hasError(\'hasWhites\')))\n                ||\n                ((!txtCodigoContrato2.valid && (txtCodigoContrato2.dirty || txtCodigoContrato2.touched)) && (txtCodigoContrato2.hasError(\'required\') || txtCodigoContrato2.hasError(\'hasWhites\')))\n                ||\n         ((!txtContrato.valid && (txtContrato.dirty || txtContrato.touched)) && (txtContrato.hasError(\'required\') || txtContrato.hasError(\'hasWhites\')))\n                ">\n\n            <span>check the fields in red, they are required</span>    \n        </div>              \n        <div class="buttons">\n            <button class="btn btn-primary boton" type="button" style="float:right;" (click)="onCloseLink()">\n                <span class="glyphicon glyphicon-off"></span> Cancel\n            </button>\n\n            <button class="btn btn-primary boton" type="button" style="float:right;" (click)="limpiar()">\n                <span class="glyphicon glyphicon-trash"></span> Clean\n            </button>\n            <button type="submit" [disabled]="!contratoForm.valid" class="btn btn-primary boton" style="float:right;" (click)="onClick()">\n                <span class="glyphicon glyphicon-floppy-disk"></span> Save\n            </button>\n        </div>\n    </form>\n

\n\n

组件.ts：

\n\n

    import { Component, HostBinding, OnDestroy, OnInit, Input, Output, EventEmitter, ElementRef, NgModule, ViewChild, ChangeDetectorRef  } from \'@angular/core\';\n    import { Validators, FormBuilder, FormControl, FormGroup, AbstractControl} from \'@angular/forms\';\n    import { AfterViewChecked } from \'@angular/core/src/metadata/lifecycle_hooks\';\n\n    @Component({\n        selector: \'app-formulario-contrato\',\n        templateUrl: \'./contrato.component.html\',\n        styleUrls: [\'./contrato.component.css\'] \n    })\n    export class FormularioContratoComponent  {\n\n        contratoForm: FormGroup;  \n\n        constructor(private elRef: ElementRef, private formBuilder: FormBuilder, private cdRef: ChangeDetectorRef) {     \n            this.createForm();           \n        }\n\n        txtCodigoContrato = new FormControl(\'\', [\n            Validators.required\n            ,this.hasNotWhites\n        ]);\n        txtCodigoContrato2 = new FormControl(\'\', [\n            Validators.required\n            , this.hasNotWhites\n        ]);\n        txtContrato = new FormControl(\'\', [\n            Validators.required\n            , this.hasNotWhites\n        ]);\n\n        createForm() {\n            this.contratoForm = this.formBuilder.group({\n                txtCodigoContrato: this.txtCodigoContrato\n                ,txtCodigoContrato2: this.txtCodigoContrato2\n                ,txtContrato: this.txtContrato           \n            });\n        }  \n\n        hasNotWhites(fieldControl: FormControl) {\n            if (fieldControl.value.trim() != \'\') {\n                return null\n            }\n            else {\n               return { hasWhites: true };\n            }          \n        }\n\n        ngAfterViewChecked() {\n            this.cdRef.detectChanges();\n        }\n\n        limpiar() {   \n        }\n\n        onClick() {\n            return null;\n        }\n

\n\n

组件.css：

\n\n

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

\n\n

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

\n\n

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

\n\n

有什么方法可以通过 typescript 控制这些值，也就是说，每次控件中的值更改时，它都由 typeScript 中返回 true 或 false 的函数控制，并且仅询问我的 div 中该函数的值？

\n

Answer 1

你可以做类似的事情

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

如果您愿意，可以在之前添加一个映射函数，以仅从您关心的正在更改的表单中获取值

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