wartości modelu nie są automatycznie przycinane kątowo 2

Question

Używam sprawdzania poprawności 2-wymiarowej, ustawiam wymagane sprawdzanie poprawności na polu tekstowym, gdy wprowadzam nic do pola tekstowego, wyświetla się wymagany komunikat o błędzie, ale jest dobrze, ale gdy wprowadzam tylko spacje, to nie wyświetlają wymaganego komunikatu o błędzie, co oznacza, że ​​kąt 2 nie przycina wartości modelu.

W kancie 1.x automatycznie przycina wartości modelu, ale w kancie 2 nie widzę tej funkcji.

Answer 1

Myślę, że należy zaimplementować do tego celu niestandardowy akcesor wartości. Coś takiego:

const TRIM_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TrimValueAccessor), multi: true}); 

@Directive({ 
    selector: 'input[trim]', 
    host: { '(keyup)': 'doOnChange($event.target)' }, 
    providers: [ TRIM_VALUE_ACCESSOR ] 
}) 
export class TrimValueAccessor extends DefaultValueAccessor { 
    onChange = (_) => {}; 
    onTouched =() => {}; 

    constructor(private renderer:Renderer) { 
    } 

    writeValue(value:any):void { 
    if (value!=null) { 
     super.writeValue(value.toString().trim()); 
    } 
    } 

    doOnChange(elt) { 
    let val = elt.value.trim(); 
    this.renderer.setElementProperty(elt, 'value', val); 
    this.onChange(val); 
    } 
} 

Kiedy chcesz użyć tej wartości akcesor, dodać odpowiednią dyrektywę do swojego urządzenia i atrybut trim na wejściu:

@Component({ 
    (...) 
    template: ` 
    <input type="text" trim/> 
    `, 
    directives: [ TrimValueAccessor ] 
}) 

Zobacz ten artykuł więcej szczegółów (sekcja "NgModel zgodny komponent"):

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Answer 2

Cóż, istnieje long discussion on github z następującym wynikiem: musimy wdrożyć nasze własne walidatory.

To co używam do tej pory:

import { ValidatorFn, AsyncValidatorFn, Validators as V, FormControl } from '@angular/forms'; 

// the need in this validators is the non-trimming angular standard behavior 
// see https://github.com/angular/angular/issues/8503 
export class Validators { 

    public static required(control: FormControl) { 
    if (!control.value || typeof control.value === 'string' && !control.value.trim()) { 
     return { 
     required: true 
     }; 
    } 

    return null; 
    } 

    public static minLength(length: number): ValidatorFn { 
    return (control: FormControl) => { 
     if (!control.value || typeof control.value === 'string' && control.value.trim().length < length) { 
     return { 
      minlength: true 
     }; 
     } 

     return null; 
    }; 
    } 

    public static maxLength(length: number): ValidatorFn { 
    return (control: FormControl) => { 
     if (control.value && typeof control.value === 'string' && control.value.trim().length > length) { 
     return { 
      maxlength: true 
     }; 
     } 

     return null; 
    }; 
    } 

    public static pattern(pattern: string): ValidatorFn { 
    return V.pattern(pattern); 
    } 

    public static minAmount(amount: number): ValidatorFn { 
    return (control: FormControl) => { 
     if (control.value && control.value.length < amount) { 
     return { 
      minamount: true 
     }; 
     } 

     return null; 
    }; 
    } 

    public static maxAmount(amount: number): ValidatorFn { 
    return (control: FormControl) => { 
     if (control.value && control.value.length > amount) { 
     return { 
      maxamount: true 
     }; 
     } 

     return null; 
    }; 
    } 

    public static compose(validators: ValidatorFn[]): ValidatorFn { 
    return V.compose(validators); 
    } 

    public static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn { 
    return V.composeAsync(validators); 
    } 

}; 

ta naśladuje standardowe maxLength, minLength i required walidacji dla wejścia ciąg ale z przycinania i prokurenci inne funkcje do standardowych.

go używać tylko importować Walidatorów zamiast @angular/forms jednym, np .:

import { FormControl } from '@angular/forms'; 
import { Validators } from 'path/to/validators'; 

... 
let control = new FormControl('', Validators.compose(
    Validators.required, Validators.minLength(6) 
)); 
... 

ten może nie wykończenia modelu ale to rozwiązuje problem walidacji określonej we wniosku.

Answer 3

Witam spróbować tego w HTML lub JSP

(keydown.space)="$event.preventDefault()" 

to nie pozwoli miejsca w polu tekstowym.

To zadziałało dla mnie.

Answer 4

można po prostu zainstalować pakiet TrimValueAccessor npm że Utworzono:

npm install ng-trim-value-accessor --save 

a następnie zaimportować je do aplikacji:

import { NgModule } from '@angular/core'; 
import { TrimValueAccessorModule } from 'ng-trim-value-accessor'; 

@NgModule({ 
    imports: [ 
    TrimValueAccessorModule 
    ] 
}) 
export class AppModule { } 

Answer 5

Oto kod dla Angular4 lub zainstalować go z KMP. https://www.npmjs.com/package/ngx-trim

const TRIM_VALUE_ACCESSOR = { 
    provide: NG_VALUE_ACCESSOR, 
    // tslint:disable-next-line:no-forward-ref 
    useExisting: forwardRef(() => NgxTrimDirective), 
    multi: true 
}; 

@Directive({ 
    selector: 'input[ngxTrim]', 
    providers: [TRIM_VALUE_ACCESSOR] 
}) 
export class NgxTrimDirective implements ControlValueAccessor { 
    _onChange(_: any) { } 
    _onTouched() { } 
    registerOnChange(fn: (value: any) => any): void { this._onChange = fn; } 
    registerOnTouched(fn:() => any): void { this._onTouched = fn; } 
    constructor (
    private _renderer: Renderer2, 
    private _elementRef: ElementRef 
) { } 

    writeValue(value: any): void { 
    value && this._renderer.setProperty(this._elementRef.nativeElement, 'value', value); 
    } 

    @HostListener('keyup', ['$event.target']) 
    _onKeyUp(element: HTMLInputElement) { 
    let val = element.value.trim(); 
    this.writeValue(val); 
    this._onChange(val); 
    } 
} 

BTW, myślę, że powinno wdrożyć ControlValueAccessor zamiast przedłużenia DefaultValueAccessor.