更改ngModel时，maxlength不起作用

Question

<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

Answer 1

使用 [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