Можно ли вызвать событие только один раз, если какая-либо часть элемента формы Angular окажется в фокусе?

Question

Я работаю с угловыми формами и пытаюсь выяснить, есть ли лучший способ инициировать событие в первом начальном фокусе любой ячейки в форме.Таким образом, событие вызывается только один раз.

Я знаю, что вы можете инициировать событие, добавив атрибут ng-focus к каждому из элементов ячейки.Однако это приведет к тому, что событие будет запускаться каждый раз, когда каждый элемент ячейки формы получает фокус.

Допустим, у нас есть эта форма с вводами, текстовыми областями, переключателями и т. Д.

Я надеялся, что это сработает, но это не так:

Добавление атрибута ng-cell-has-focus="vm.clearAllMessages()" в элемент * <form>

<form
  name="vm.form"
  novalidate
  ng-cell-has-focus="vm.clearAllMessages()"
  ng-submit="vm.form.$valid && vm.sendForm($event)">
  <div class="form-group">
    <label for="name-id">Name</label>
    <input id="name-id"
           name="name"
           type="text"
           ng-model="vm.formData.username"
           autofocus
           required>
    <div class="error-message"
         ng-messages="vm.form.name.$error"
         ng-if="vm.form.name.$touched || vm.form.$submitted">
      <div ng-message="required">Name is required.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="email-id">Email</label>
    <input id="email-id"
           name="email"
           type="email"
           ng-model="vm.formData.emailAddress"
           required>
    <div class="error-message"
         ng-messages="vm.form.email.$error"
         ng-if="vm.form.email.$touched || vm.form.$submitted">
      <span ng-message="required">Email address is required.</span>
      <span ng-message="email">Please enter a valid email address.</span>
    </div>
  </div>
  <div class="form-group">
    <input id="radio-1-id"
           name="radio"
           type="radio"
           value="First option"
           ng-model="vm.formData.radio"
           required>
    <label for="radio-1-id">First option</label>
    <input id="radio-2-id"
           name="radio"
           type="radio"
           value="Second option"
           ng-model="vm.formData.radio"
           required>
    <label for="radio-2-id">Second option</label>
    <div class="error-message"
         ng-messages="vm.form.radio.$error"
         ng-if="vm.form.radio.$touched || vm.form.$submitted">
      <span ng-message="required">Choose an option is required.</span>
    </div>
  </div>
  <div class="form-group">
    <label for="message-id">Message</label>
    <textarea id="message-id"
              name="message"
              cols="1"
              rows="4"
              ng-model="vm.formData.message"
              placeholder="Type in Message here ..."
              required></textarea>
    <div class="error-message"
         ng-messages="vm.form.message.$error"
         ng-if="vm.form.message.$touched || vm.form.$submitted">
      <div ng-message="required">Message is required.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="terms-id">Agree to Terms of Use</label>
    <input id="terms-id"
           name="terms"
           type="checkbox"
           ng-model="vm.formData.terms"
           required>
    <div class="error-message"
         ng-messages="vm.form.emailConfirm.$error"
         ng-if="vm.form.emailConfirm.$touched || vm.form.$submitted">
      <div ng-message="required">You must agree to Terms of Use.</div>
    </div>
  </div>
  <button type="submit">SUBMIT</button>
</form>