How to add 'required field' asterisk to angular reactive form inputs

Question

I am developing one application with reactive dynamic angular form. This forms fields are coming from an API request and is generated dynamically.

I really need to add 'required field' asterisk (*) to my form inputs which are required. How to achieve this ?

The below is how my form fields look like.

<ng-container *ngIf="input1.type=='string'" [hidden]="False">
 <div>
  <mat-form-field>
   <input matInput   [formControlName]="input1.field_name"  type="text"  placeholder="{{input1.title}}">
  </mat-form-field>   
 </div>
</ng-container>

Answer 1

Html

<span *ngIf = "input1?.required">*</span>

.ts

You want to require a input depending on some conditions. Have a look here

Answer 2

Should be fixed when Angular v13 is released. https://github.com/angular/components/pull/23362