代码之家 › 专栏 › 技术社区 › Learning is a mess

角度文本区域输入:如何设置最大长度/行+最大行数

two-way-binding angular-material angular

Learning is a mess · 技术社区 · 7 年前

以下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>

定义具有双向绑定的textarea输入。它会检查大小:行的总数和行的最大长度。如果这些约束大于中给出的某些约束 textAreaLimit

我想更改它,以便用户无法打破此限制,例如,如果最大行数为3,并且有3行,则用户无法添加新行。如何在不破坏双向绑定的情况下做到这一点?

2 回复 | 直到 7 年前

Sachila Ranawaka 7 年前

[maxLength] 所有物

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

Jscti 6 年前

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