Question

以下html代码段：

<mat-form-field class='textarea'>
    <textarea #txtarea matInput (change)='txtAreaChange()' [placeholder]="label" [(ngModel)]='text'></textarea>
    <mat-hint [class.red]="txtarea.value.split('\n').length > textAreaLimit[1]" align="start"> {{txtarea.value ? txtarea.value.split('\n').length : 0}}/{{textAreaLimit[1]}} lines</mat-hint>
    <mat-hint [class.red]="txtarea.value && txtarea.value.split('\n').map( len).max() > textAreaLimit[0]" align="end">Longest line: {{txtarea.value ? txtarea.value.split('\n').map( len).max() : 0}}/{{textAreaLimit[0]}}</mat-hint>
</mat-form-field>

使用双向绑定定义文本区域输入。它会检查大小：总行数和最大行长。如果这些值大于textAreaLimit中给出的某些约束，则提示变为红色。

我想更改它，以使用户无法打破此约束，例如，如果最大行数为3，并且有3行，则用户无法添加新行。如何做到这一点而又不破坏双向绑定？

Answer 1

使用[maxLength]属性

<textarea #txtarea matInput  [maxLength]="maxNo" (change)='txtAreaChange()' [placeholder]="label" [(ngModel)]='text'></textarea>

Answer 2

对于此特定需求/行为，您需要创建一个简单的自定义验证器

maxLinesValidator(limit: number): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
        const exceeded = control.value.length && control.value.split('\n').length > 4;
        return exceeded ? {'maxLines': {value: true}} : null;
    };
}

您将绑定到FormControl。您可以查看fiddle（src/app/reactive .ts + html）的工作原理，其中text字段已实时验证，如果用户超过了最大行数限制，则会显示错误消息

Angular Textarea MatInput：如何设置最大长度/最大行数+最大行数

2 个答案: