My requirement is to display maxlength error message for input field if it exceeds the maxlength.
This is working for input type number. Error message is displaying if the input field exceeds maxlength.
This is not working for input type text field. Error message is not displaying instead of that it is restricting the user to enter the values more that the given maxlength.
Can anyone suggest me the solution for this issue.
Thank You, Java4you.
I would recommand to use ReactiveForms and set the validator for max-length.
In your module:
import { ReactiveFormsModule } from '@angular/forms'
...
@NgModule({
imports: [
...
ReactiveFormsModule
]
.....
})
Then go over to your component and inject formbuilder
import { FormBuilder } from '@angular/forms';
...
export class MyFormComponent {
public fb: FormGroup;
public constructor(private formBuilder: FormBuilder) {
this.fb = this.formBuilder.group({
myControlWithMaxLength: ['', Validators.maxLength(128)]
});
}
}
Now in your template do the following
<form [formGroup]="fb" novalidate>
<input type="text" formControlName="myControlWithMaxLength" />
<span *ngIf="fb.controls['myControlWithMaxLength'].hasError('maxLength')">Max length is 128!</span>
</form>
To keep the template cleaner you can write getters in your component instead.
