actualmente estoy aprendiendo angular2 con la parte de validación, no puedo validar el campo de cuadro de texto del cliente simple
Aquí está mi código HTML
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 padding-lft-rght-0"> <div class="form-control setup-form margin-btm"> <label test_id="lblcustname" class="control-label col-xs-12 col-sm-4 col-md-4 col-lg-3" for=""> {{ 'CUSTOMER.CNAME' | translate }} <span class="mandatory">*</span> </label> <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-left-0"> <input type="text" id="txtName" class="form-control" required maxlength="100" name="CustomerName" [(ngModel)]="customerObj.CustomerName" (ngModelChange)="checkCustomeName($event)" /> </div> </div> </div>y debajo de mi código Typescript
checkCustomeName(event) { if (event === "") { this.isCustomerNameEmpty = false; } else { var textbox= document.getElementById('txtName'); if (textbox.nodeValue.length > 100) { this.isCustomerNameexceed = false; } this.isCustomerNameexceed = true; } }Entonces, cada vez que estoy depurando usando Chrome, no puedo obtener ningún valor en la línea de abajo.
var textbox= document.getElementById('txtName');Entonces, ¿es esta la forma correcta de hacer la validación en mecanografiado?
Creo que solo obtienes el elemento con
var textbox = document.getElementById('txtName');Tratar
var textbox = document.getElementById('txtName').value;Mejor aún, dado que está utilizando el enlace de datos, debería poder usar
var textbox = customerObj.CustomerName; if (textbox.length > 100) ...Si desea utilizar el enfoque angular, consulte la validación de formularios en los documentos angulares
Lo primero que tienes que tener en cuenta. Esta plantilla:
<input [(ngModel)]="some"/>es lo mismo que:
<input [ngModel]="some" (ngModelChange)="some = $event">Tener
<input [(ngModel)]="some" (ngModelChange)="someHandler($event)">es mala idea
Básicamente, existe una "forma Angular2" para realizar la validaciónhttps://angular.io/docs/ts/latest/cookbook/form-validation.html , pero lo que sea.
Otra cosa: no necesita una referencia a txtField para obtener valor.
checkCustomeName(event) - donde event es su valor.ngOnChanges() https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html