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

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

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.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中请求该函数的值

你可以做如下事情

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

如果需要，您可以在之前添加一个map函数，以便仅从您关心的正在更改的表单中获取值

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

---

你可以这样做

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

如果需要，您可以在之前添加一个map函数，以便仅从您关心的正在更改的表单中获取值

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

---

尝试使用

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:

更新2

在HTML中使用函数：

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

我创造了一个

如果添加具有相同验证逻辑的新控制器，只需将其控件名称添加到
controllersToCheck
array
尝试使用
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:

更新2

在HTML中使用函数：

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

我创造了一个

如果添加具有相同验证逻辑的新控制器，只需将其控件名称添加到
controllersToCheck
array
即可，但只有在我更改输入时才会跳转，当我只是用光标从一个输入移动到另一个输入，而不键入任何内容时，我需要跳转尝试订阅
statusChanges
事件而不是
valueChanges
，查看我的更新答案我将其更改为“statuschange”，并且我能够验证当我用光标从一个字段移动到另一个字段时，字段的状态发生了变化，但它没有跳转到函数中。我不明白为什么：this.contratoForm.statusChanges.suscribe（….“statusChanges”评估值“valid”或“invalid”最初，所有输入的值都是无效的，所以当我用光标从一个输入移动到另一个输入时，它们仍然是无效的，不会进入函数。然后，我想我需要检查表单中控件的触摸状态。它可以工作，但只在我更改输入时跳转，当我用光标从一个输入移动时，我需要跳转输入到另一个而不键入任何内容尝试订阅
statusChanges
事件，而不是
valueChanges
，请参阅我的更新答案我将其更改为“statuschange”我能够验证，当我将光标从一个字段移动到另一个字段时，字段的状态会发生变化，但它不会跳转到函数中。我不明白为什么：this.contratoForm.statusChanges.suscribe（…“statusChanges”计算值“valid”或“invalid”最初，所有输入的值都是无效的，所以当我用光标从一个输入移动到另一个输入时，它们仍然是无效的，不会进入函数。然后，我想我需要检查表单中控件的触摸状态。这可以工作，但只在我更改输入时跳转。当我用光标从一个输入移动到另一个输入时，我也需要跳转一个输入到另一个输入，但不键入任何内容。这可以工作，但只有在我更改输入时才会跳转。当我只是将光标从一个输入移动到另一个输入，而不键入任何内容时，我也需要跳转