title: Angular 4 'this' is undefined
body: <p>I try to know the value of an input within the function, but when I try to call the next line in the function "validateAllFormFields()":</p>
  
  <pre><code> if (this.txtImporteMaximoVC==="0") 
  </code></pre>
  
  <p>"this" is "undefined"</p>
  
  <p>what I want is to retrieve the control value of "txtImporteMaximoVC", but if I try to recover the value from the formcontrol with control.value, it always returns empty and the input really has values, I think that control.value ="" because de formControl is using a directive.</p>
  
  <p>the component.ts:</p>
  
  <pre><code>        import { Component, HostBinding, OnDestroy, OnInit, Input, Output, EventEmitter, ElementRef, NgModule, ViewChild, ChangeDetectorRef  } from '@angular/core';
  import { Validators, FormBuilder, FormControl, FormGroup, AbstractControl,  ValidatorFn } from '@angular/forms';
  import { AfterViewChecked } from '@angular/core/src/metadata/lifecycle_hooks';
  import { CustomValidators } from '../../../shared/customValidators/custom.validators';
  import { CurrencyPipe } from "../../../shared/pipes/pipeFormatCurrency/currency.pipe";
  import { FieldErrorDisplayComponent } from '../../../shared/comun/fieldErrorDisplay/field-error-display.component'
  import { FocusDirective } from '../../../shared/directives/focus.directive';
  
  @Component({
      selector: 'app-formulario-contrato',
      templateUrl: './contrato.component.html',
      styleUrls: ['./contrato.component.css'],
      providers: [CurrencyPipe],
  
  })
  export class FormularioContratoComponent  {
  
      @Output() pressPointDecimal: boolean;
      @Output() setFormat: boolean;
      @ViewChild('txtImporteMaximo') txtImporteMaximoVC;
      //__________________________________________________ Validaciones formulario:
  
  
      constructor(private elRef: ElementRef, private formBuilder: FormBuilder, private cdRef: ChangeDetectorRef, private formatcurrencypipe: CurrencyPipe) {      
  
          this.createForm();  
      }
  
      public txtImporteMaximo = new FormControl('', [this.lessThanZeroValidator]);  
  
      createForm() {
          this.contratoForm = this.formBuilder.group({     
              txtImporteMaximo: this.txtImporteMaximo,
          });
      }
  
      lessThanZeroValidator(fieldControl: FormControl) {     
          if (fieldControl &amp;&amp; fieldControl.value != null &amp;&amp; !isNaN(parseInt(fieldControl.value)) &amp;&amp; fieldControl.value &lt;= 0) {        
              return { lessThanZeroErr: true };
          }
          else {           
              return null;
          }
      }    
  
      isFieldInvalid(field: string) {   
          if (this.contratoForm &amp;&amp; this.contratoForm.get(field)) {          
              return !this.contratoForm.get(field).valid &amp;&amp; this.contratoForm.get(field).touched;
  
          } else {
              if (this.contratoForm &amp;&amp; this.contratoForm.controls["fechas2"].get(field)) {              
                  return !this.contratoForm.controls["fechas2"].get(field).valid &amp;&amp; this.contratoForm.controls["fechas2"].get(field).touched;
              }
          } // if (this.contratoForm &amp;&amp; this.contratoForm.get(field)) {
  
          return null;     
      }
  
      ngAfterViewChecked() {
          this.cdRef.detectChanges();
      }
  
      limpiar() {          
          this.contratoForm.reset();      
      }    
  
      onClick() {
          this.validateAllFormFields(this.contratoForm);      
      }
  
      onCloseLink() {
          if (this.closeFunction) {
              this.closeFunction();
          }
      }
  
      validateAllFormFields(formGroup: FormGroup) {        
          Object.keys(formGroup.controls).forEach(field =&gt; { 
              const control = formGroup.get(field);            
              if (control instanceof FormControl)
              {  
                  if (field == "txtImporteMaximo") {
  
                      if (this.txtImporteMaximoVC === "0") {
                          control.setErrors({ lessThanZeroErr: true });
                      }
                  }
                  control.markAsTouched({ onlySelf: true });
              } else if (control instanceof FormGroup) {       
                  this.validateAllFormFields(control);           
              }
          });
      }
  
  }
  </code></pre>
  
  <p>component.html:</p>
  
  <pre><code>&lt;div&gt;
      &lt;form [formGroup]="contratoForm" #form="ngForm"&gt;
          &lt;div class="content"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="control"&gt;
                      &lt;label class="etiquetaFormulario" for="txtImporteMaximo"&gt;Importe Máximo&lt;/label&gt;
                      &lt;input autocomplete="off" [formControl]="txtImporteMaximo" type="text" id="txtImporteMaximo" name="txtImporteMaximo" class="cajaTexto ancho80" currencyFormatterDirective [pressPointDecimal]="true" [setFormat]="true" /&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="txtImporteMaximo.hasError('lessThanZeroErr')"&gt;
                      &lt;app-field-error-display [displayError]="'true'" [errorMsg]="'El importe debe ser mayor que cero'"&gt;&lt;/app-field-error-display&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="isFieldInvalid('txtImporteMaximo') &amp;&amp; !txtImporteMaximo.hasError('lessThanZeroErr')"&gt;
                      &lt;app-field-error-display [displayError]="'true'" [errorMsg]="'Por favor, informe el campo importe máximo'"&gt;&lt;/app-field-error-display&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
              &lt;div class="linea"&gt;&lt;/div&gt;         
          &lt;/div&gt;
          &lt;div class="footer"&gt;
              &lt;div class="buttons"&gt;
                  &lt;button class="btn btn-primary boton" type="button" style="float:right;" (click)="onCloseLink()"&gt;
                      &lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt; Cancelar
                  &lt;/button&gt;
  
                  &lt;button class="btn btn-primary boton" type="button" style="float:right;" (click)="limpiar()"&gt;
                      &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Limpiar
                  &lt;/button&gt;
                  &lt;button type="submit" [disabled]="!contratoForm.valid" class="btn btn-primary boton" style="float:right;" (click)="onClick()"&gt;
                      &lt;span class="glyphicon glyphicon-floppy-disk"&gt;&lt;/span&gt; Guardar
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="clear" style="clear:both;"&gt;&lt;/div&gt;
          &lt;/div&gt;    
      &lt;/form&gt;
      &lt;div class="clear" style="clear:both;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea?</p>