如何根据下拉值在 Angular 表单中 add/remove 或 show/hide 文本框

Question

从这个打开的下拉列表中选择特定项目时，我希望文本框显示在表单中这些下拉值中的每一个都有特定的属性，这些属性是从数据库中获取的。

这是表格

    <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>

我调用的是选择下拉项的方法

    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);
            }
        });
     }

我想在对话框打开时隐藏文本框。并且仅在 maintainanceSchedule 为真时显示维护文本框，在 calibrationSchedule 为真时显示校准文本框，或者在 getGroupDetail() 函数中两者都为真时显示两者。

Answer 1

为此，您应该使用 Reactive Form 方法，而不是现有的 Template Driven 解决方案。基本上不用 [(ngModel)]，而是改用 FormControl's，可能还有 FormBuilder。此处对这两种方法进行了很好的比较：https://www.pluralsight.com/guides/difference-between-template-driven-and-reactive-forms-angular

Angular 文档本身就使用 Reactive Forms 创建动态生成的表单提供了很好的指南，这些表单可以 show/hide 基于其他字段值的字段和更多的。您可以在此处找到该指南：https://angular.io/guide/dynamic-form

如何根据下拉值在 Angular 表单中 add/remove 或 show/hide 文本框

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

angular

typescript

angular-material

angular9

angular-template-form