Как установить ограничение на количество символов на вводе мата?

Question

Я не нашел упоминания об ограничении количества символов в документации. Похоже, очень распространенное требование.

Как я могу добавить к этому Textarea ограничение в 300 символов?

https://stackblitz.com/edit/angular-izbcey?file=app/input-overview-example.ts

Answer 1

Вы можете использовать это для текста

<mat-form-field hintLabel="Max 300 characters">
<input matInput #input maxlength="300" placeholder="Enter some input">
<mat-hint align="end">{{input.value?.length || 0}}/300</mat-hint>
</mat-form-field>

для текстового поля

<mat-form-field hintLabel="Max 10 characters">
  <textarea #txtarea matInput  [maxLength]="10" [placeholder]="label"></textarea>
 </mat-form-field>

Answer 2

const MAX_VALIDATOR: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => MaxValidatorDirective),
  multi: true,
};

@Directive({
  selector: '[max][formControlName],[max][formControl],[max][ngModel]',
  providers: [MAX_VALIDATOR],
})
export class MaxValidatorDirective implements Validator {
  @Input() maxInput: number;

  validate(c: AbstractControl): {[key: string]: any} {
    return this.max(this.maxInput)(c);
  }

  max(testValue: number, ignoreNan = true) {
    return (control: AbstractControl): {[key: string]: any} => {
      let value = parseFloat(control.value);
      if (ignoreNan && isNaN(value)) {
        return null;
      } else {
        return value <= testValue ? null : {'max': {value}};
      }
    }
  };
}

Вам нужно сделать такую ​​директиву, и вы можете ее использовать