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

Question

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.

score 1 · Accepted Answer · answered Jun 10 '20 at 17:56

1

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

answered Jun 10 '20 at 17:56

tommueller

2,358
2
32
44

is it not possible at all in this approach? – Dev Jun 11 '20 at 04:53
1

doing it dynamically (as I understand is what you are doing, because you are fetching the fields from the database) will be a huge pain. if you know which fields to show for every selected value, you can add them to the template and use `*ngIf` to show or hide them – tommueller Jun 11 '20 at 08:33
then please suggest how to do it using reactive form? – Dev Jun 11 '20 at 11:26
After using the reactive form I was able to do it , but there's a problem ,If a textbox is shown on a dropdown change event it is a required field so validation message is shown left blank. Now in this state if I change to some other dropdown value the textbox disappears and when it re-appears again it comes with the error message and red colored – Dev Jun 11 '20 at 11:41
1

Please open another question with some code for this – tommueller Jun 12 '20 at 05:24
Thanks I implemented it perfectly after using reactive form as you had suggested. – Dev Jul 01 '20 at 12:22

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

1 Answers1