How to disable Autocomplete in input fields : Angular

Question

I have a reactive form where i am using input fields. I want to disable autocomplete feature for input types for any kind of browser. I have tried autocomplete="off" in both input's and form level. But it is not working.

How to create a Angular directive for disabling autocomplete for all browsers. here is the code that I am using -

<form autocomplete="off" [formGroup]="registration" (ngSubmit)="registerOnSubmit()">
  <div>
    <input type="text" name="firstName" id="firstName" autocomplete="off" formControlName="firstName" />
    <label>Name</label>
  </div>
  <div>
    <input type="text" name="lastName" id="lastName" autocomplete="off" formControlName="lastName" />
    <label>Name</label>
  </div>
  <button>submit</button>
</form>

Answer 1

According to this: Turning_off_form_autocompletion | Developers - Mozilla .

If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element.