How to add astrik (*) symbol for shown field as mandatory field

[sunil]

Hi team,

here i am providing sample code.

<form #justAForm="ngForm" (ngSubmit)="uploadFiles($event)" novalidate="">

  <!-- First row  -->

  <div class="e-card">

    <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px">

      <div fxFlex class="child-1">

        <span id="custlabelfile">File Upload</span>

        <ejs-uploader #defaultupload (selected)='onFileSelected1($event)' change="getAgreementTypeData($event)"

          webkitdirectory directory multiple multiple = 'false' [allowedExtensions]='allowExtensions' required ></ejs-uploader>

      </div>

      <div fxFlex class="child-2">

        <ejs-dropdownlist floatLabelType="Always" id='documentName' name="documentName"

          [dataSource]='agreementTypeDatas' [fields]='fieldsvalues'  popupHeight='200px'

          (change)='onDocumentSelect($event)' ngModel

          [allowFiltering]='true' (filtering)='onFiltering($event)' placeholder="Select DocumentType" required>

        </ejs-dropdownlist>

      </div>

      <div fxFlex class="child-3">

        <ejs-textbox placeholder="Identifier" name="Identifier" field="Identifier" floatLabelType="Always" ngModel required>

        </ejs-textbox>

      </div>

      <div fxFlex="100px" style="text-align: right;" class="child-4">

        <button  ejs-button cssClass="e-primary" type="submit" [disabled]="form.invalid" >Upload</button>

      </div>

    </div>

  </div>

</form>

[Vinitha Jeyakumar]

Hi Sunil,

Your requirement to add asterisk symbol for mentioning the mandatory field can be achieved by adding a label tag with a required class like below,

Code snippet:

 <label class="required">File Upload:</label>

        <ejs-uploader

          #defaultupload

          id="defaultfileupload"

          [dropArea]="dropElement"

        ></ejs-uploader>

        <label class="required">Select Fields:</label>

        <ejs-dropdownlist

          id="games"

          #sample

          [dataSource]="sportsData"

          [fields]="fields"

          [placeholder]="waterMark"

          [popupHeight]="height"

        ></ejs-dropdownlist>

<style>

.required:after {

  content: ' *';

  color: red;

}

</style>

Sample: https://stackblitz.com/edit/angular-ry72uq-qj1coa?file=app.component.html,app.component.css

Regards,

Vinitha