How to add/remove or show/hide textbox in an Angular form according to dropdown value

On selecting a particular item from this open dropdown I want the textboxes to be shown in the form Each of these dropdown value has certain properties which are being fetched from database.

This is the form

    <mat-form-field class="col-md-6">
                <mat-label>Item Group Name</mat-label>
                <mat-select [(ngModel)]="model.itemGroupId" name="itemGroupId" #itemGroup="ngModel" 
     (selectionChange)="getGroupDetail()" required>
                    <mat-option *ngFor="let group of model.itemGroupList" 
      [value]="group.ItemGroupId">
                        {{ group.ItemGroupName }}
                    </mat-option>
                </mat-select>
                <mat-error *ngIf="itemGroup.invalid && itemGroup.touched">Select an Item Group</mat- 
        error>
            </mat-form-field>
         </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <mat-form-field class="col-md-6" *ngIf="model.maintenanceSchedule">
                <mat-label>Maintainance Schedule(Days)</mat-label>
                <input matInput [(ngModel)]="model.strMaintenanceSchedule" 
         name="strMaintenanceSchedule" #maintenance="ngModel" required>
                <mat-error *ngIf="maintenance.invalid && maintenance.touched">Maintenance Schedule is 
            Required</mat-error>
            </mat-form-field>
            <mat-form-field class="col-md-6" *ngIf="model.calibrationSchedule">
                <mat-label>Callibration Schedule(Days)</mat-label>
                <input matInput [(ngModel)]="model.strCalibrationSchedule" 
        name="strCalibrationSchedule" #calibration="ngModel" required>
                <mat-error *ngIf="calibration.invalid && calibration.touched">Calibration Schedule is 
      Required</mat-error>
            </mat-form-field>
         </div>
    </div>

Method I'm calling on selection of dropdown item

    getGroupDetail(){
        this.service.getItemGroupDetail(this.model.itemGroupId).subscribe((res:any)=>{
            if(res.isIdentityExist==true){
                if(res.isSuccess ==true){
                    this.model.itemGroupList=res.itemGroup;
                    this.model.maintenanceSchedule=res.itemGroup.MaintenanceSchedule==true? 
      true:false;
                    this.model.calibrationSchedule=res.itemGroup.CalibrationSchedule==true? 
         true:false;
                }
                else{
                    this.toast.error(res.responseMsg);
                }
            }
            else{
                this.toast.error(res.responseMsg);
                setTimeout(() => {
                    this.router.navigate(["./login"]);
                }, 1000);
            }
        });
     }

I Want to keep the textboxes hidden when the dialog opens . and only show the maintenance textBox when maintainanceSchedule is true and calibration textbox when the calibrationSchedule is true or both if both true in the getGroupDetail() function.

For this you should be using the Reactive Form approach instead of the Template Driven solution that you have in place. Basically instead of using [(ngModel)] you switch to using FormControl's and possibly the FormBuilder. There is a good comparison of the two approaches here: https://www.pluralsight.com/guides/difference-between-template-driven-and-reactive-forms-angular

The Angular docs itself offer a great guide to using Reactive Forms to create dynamically generated forms that can show/hide fields based on other fields values and more. You can find the guide here: https://angular.io/guide/dynamic-form