Angular textarea matInput：如何设置最大 length/line + 最大行数

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

对于这个特定的 need/behavior，您需要创建一个简单的自定义验证器

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。你可以看看这个有效的 fiddle (src/app/reactive .ts + html) 其中 text 字段是实时验证的，如果用户超过最大值则显示错误行数限制

Angular textarea matInput：如何设置最大 length/line + 最大行数

Angular textarea matInput: how can set max length/line + max number of lines

angular-material

angular

two-way-binding