如何在垫输入上设置字符限制?
How to put character limit on a mat Input?
我在 docs 中没有发现任何关于字符数限制的提及。
似乎是一个非常普遍的要求。
如何向该文本区域添加 300 个字符的限制?
https://stackblitz.com/edit/angular-izbcey?file=app/input-overview-example.ts
您可以像这样使用文本
<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>
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}};
}
}
};
}
你需要做一个这样的指令,你可以使用它
我在 docs 中没有发现任何关于字符数限制的提及。 似乎是一个非常普遍的要求。
如何向该文本区域添加 300 个字符的限制?
https://stackblitz.com/edit/angular-izbcey?file=app/input-overview-example.ts
您可以像这样使用文本
<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>
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}};
}
}
};
}
你需要做一个这样的指令,你可以使用它