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

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 > limit;
        return exceeded ? {'maxLines': {value: true}} : null;
    };
}

您将绑定到 FormControl。您可以看一下这个工作小提琴（src/app/reactive.ts + html），其中text字段会实时验证，如果用户超出最大行数限制，则会显示错误