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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
sollten Sie verwenden
*ngIf="myForm.controls['departmentLocation'].hasError('required')"
oder besser Glück mit
this.departmentName= this.myForm.controls.find('departmentName');
?Statt
hasError
Sie verwenden solltenerrors
ich.e es sollte
ich.e mit *ngIf
errors
null ist), zeigt er mir die nächste Nachricht:Cannot read property 'required' of null
myForm.controls['departmentLocation'].errors?.required
Dies ist ähnlich zu einer anderen Antwort habe ich hier bereitgestellt: Form Builder mit hasError() für die Validierung, wird eine error-der FEHLER TypeError: Cannot read property 'hasError' undefined.
Die Kernaussage ist, dass Typoskript get-s kann verwendet werden, um dieses Problem zu lösen, in eine saubere Art und Weise.
In der Komponente-Klasse:
In der Komponente template:
Auch wichtig zu beachten, dass mit ngModel mit Reaktiven Formen in Eckige 6+ depracated, so dass es entfernt wurde aus den oben genannten Beispielen.