Winkel-2 Formular-Validierung, hasError keine Funktion

ich versuche, eine Bestätigung für meine input-Felder.

dies ist ein Stück code, den ich verwendet:

DepartmentComponent

import {  
  FORM_DIRECTIVES,  
  FormBuilder,  
  ControlGroup,  
  Validators ,
   AbstractControl   
} from 'angular2/common';




@Component({
    selector: 'my-departments',
    providers: [HTTP_PROVIDERS, DepartmentService],
    directives: [FORM_DIRECTIVES, Alert],
    styleUrls: ['app/department.component.css'],
    templateUrl: 'app/department.component.html',
    pipes:[SearchPipe]

})

export class DepartmentComponent implements OnInit {
    myForm: ControlGroup;
    departmentName: AbstractControl;
    departmentLocation: AbstractControl;

    constructor(private _router: Router, private _departmentService: DepartmentService, fb: FormBuilder) { 

      this.myForm = fb.group({  
        'departmentName':  ['', Validators.required],
        'departmentLocation':  ['', Validators.required]  
      });

      this.departmentName= this.myForm.controls['departmentName'];  
      this.departmentLocation= this.myForm.controls['departmentLocation'];  
    }

DepartmentComponent Vorlage

   <form [ngFormModel]="myForm"  
          (ngSubmit)="addDepartment(newItem)" [hidden]="!showAddView" align="center">
        <div>       
            <label for="editAbrv">Department name:</label><br>
              <input type="text" [(ngModel)]="newItem.departmentName" [ngFormControl]="myForm.controls['departmentName']" > 

         <div *ngIf="departmentName.hasError('required')"  class="ui error message"><b style="color:red;">Name is required</b></div>  
      </div>

        <div>
            <label for="editAbrv">Department Location:</label><br>
             <input type="text" [(ngModel)]="newItem.departmentLocation" [ngFormControl]="myForm.controls['departmentLocation']" > 

         <div *ngIf="departmentLocation.hasError('required')" class="ui error message"><b style="color:red;">Location is required</b></div>  
      </div> 


        <div>
            <button type="submit" class="ui button">Submit</button>  
            <button><a href="javascript:void(0);" (click)="showHide($event)" >
                Cancel
            </a></button>
        </div>
</form> 

Das problem ist, dass ich einen Fehler: .hasError ist nicht eine Funktion. hasError-Funktion ist in meiner html-Datei (die kann man sehen) ich sehe wirklich nicht, wo ich falsch Liege. Ich habe alles so wie beschrieben ist im tutorial, aber kann nicht herausfinden, warum dies geschieht. Vielen Dank für die Beratung!

  • Versuchen *ngIf="departmentLocation?.hasError('required')"
  • Ich löse es mit diesem: *ngIf="myForm".Steuerelemente['departmentName'].hasError('required')". Ich bin nur nicht klar, warum es funktioniert auf diese Weise :/
  • Aber diese Zeilen this.departmentName= this.myForm.controls['departmentName']; im Konstruktor? Es ist nicht ganz klar aus deinem code, da ist eine } fehlt.
  • Ja, diese sind in meinem Konstruktor, da dachte ich, ich kann nur departmentName, nicht die ganze Zeile: dies.myForm.Steuerelemente['departmentName']; ich glaube nicht, dass ich übersehen }. Ich wollte nur nicht, kopieren Sie die ganze Klasse Umsetzung 🙂
  • Dann wird die Einrückung ist falsch (behoben). Es ist zu komisch. Ich verstehe nicht, warum das nicht funktionieren würde.
InformationsquelleAutor Yuniku_123 | 2016-02-29
Schreibe einen Kommentar