angular - 更改 ngModel 时 maxlength 不起作用

Question

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

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

它在输入字段中显示所有 20 个字符。如何防止这种行为？或者也许如何将“名称”变量限制为 10 的长度？我不想有一个表格（FormValidation）。

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

标签： angularvalidationmaxlengthangular2-ngmodel

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 演示