Угловая текстовая область 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

Для этой конкретной потребности / поведения вам нужно создать простой пользовательский валидатор

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 проверяется в реальном времени и отображает ошибку, если пользователь превышает максимальный предел линий

Answer 2

использование [maxLength] свойство

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