Carlos Cifuentes
AngularJS → Angular reference

ngMessages in modern Angular

There is no ngMessages package in Angular. Error messages are plain control flow that reads the errors of a form control.

Before · AngularJS
<input name="email" type="email" ng-model="vm.email" required>
<div ng-messages="f.email.$error" ng-if="f.email.$touched">
  <p ng-message="required">Email is required</p>
  <p ng-message="email">Invalid email</p>
</div>
After · Angular
<input formControlName="email" type="email" />
@if (email.touched && email.invalid) {
  <div class="errors">
    @if (email.hasError('required')) {
      <p>Email is required</p>
    } @else if (email.hasError('email')) {
      <p>Invalid email</p>
    }
  </div>
}

// component
get email() { return this.form.controls.email; }

What changes

  • ng-messages on $error becomes @if blocks that call hasError() on the control.
  • An @if / @else if chain shows one message at a time, like ng-messages did by default; separate @if blocks behave like ng-messages-multiple.
  • ng-messages-include becomes a small shared component that receives a control and renders its errors.

Migration tip. Angular error objects carry details: minlength gives requiredLength and actualLength. Use them to build the message instead of repeating the number in the template.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn