web-dev-qa-db-ja.com

Angular textarea matInput：最大長/行+最大行数を設定する方法

次のコードの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行ある場合など、ユーザーが新しい行を追加できない場合など、ユーザーがこの制約を破ることができないように変更します。双方向バインディングを壊さずにこれを行うにはどうすればよいですか？

angularangular-materialtwo-way-binding
6
Learning is a mess

この特定のニーズ/動作については、単純なカスタムバリデーターを作成する必要があります

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フィールドはリアルタイムで検証され、ユーザーが最大行数の制限を超えるとエラーが表示されます

1
Cétia

使用する [maxLength]プロパティ

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