maxlength не работает при изменении ngModel

<input type="text" [(ngModel)]="name" maxlength="10"/>

@Component({...})
export class MyComponent {
 name = "testtesttesttesttest"; // length = 20
}

Он отображает все 20 символов в поле ввода. Как предотвратить такое поведение? Или, может быть, как ограничить переменную name до 10? Я не хочу иметь форму (FormValidation).

https://stackblitz.com/edit/angular-qnxkad?file=src%2Fapp%2Fapp.component.html


angular validation maxlength angular2-ngmodel
person myanmar    schedule 16.06.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Используйте [attr.maxlength]

<input type="text"  [attr.maxlength]="10" [(ngModel)]="name" />

ИЗМЕНИТЬ

Поскольку вы хотите ограничить его при отображении, вы должны создать свою собственную директиву со срезом следующим образом:

@Directive({
  selector: '[appLimitTo]',
})
export class LimitToDirective {
    @Input() limit: number;
    constructor(private ngControl: NgControl) {}
    ngOnInit() {
      const ctrl = this.ngControl.control;
      ctrl.valueChanges
        .pipe(map(v => (v || '').slice(0, this.limit)))
        .subscribe(v => ctrl.setValue(v, { emitEvent: false }));
    }
}

STACKBTLIZ DEMO

person Sajeetharan    schedule 16.06.2018
comment
вы хотите ограничить при отображении или запретить пользователю вводить только 10? - person Sajeetharan; 16.06.2018
comment
Оба сценария. - person myanmar; 16.06.2018
comment
да. Оно работает. Таким образом, это не может быть выполнено без использования директивы. Это означает, что это должно быть ограничено в машинописном тексте. - person myanmar; 16.06.2018
comment
nope maxlength не будет работать в этом случае, вам нужна директива - person Sajeetharan; 16.06.2018