角度文本区域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。你可以看看这个工作的fiddle(src/app/reactive.ts+html(，其中text字段被实时验证，如果用户超过的最大行限制，就会显示错误