0

r

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

这是表格

    <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 为true 时显示维护文本框，当calibrationSchedule 为true 时显示校准文本框，或者在getGroupDetail() 函数中两者都为true 时显示校准文本框。

4

1 回答 1

1

为此，您应该使用响应式表单方法，而不是您现有的模板驱动解决方案。基本上不是使用[(ngModel)]你切换到使用FormControl's和可能的FormBuilder. 这里对这两种方法进行了很好的比较：https ://www.pluralsight.com/guides/difference-between-template-driven-and-reactive-forms-angular

Angular 文档本身为使用反应式表单创建动态生成的表单提供了很好的指南，这些表单可以根据其他字段值等显示/隐藏字段。你可以在这里找到指南：https ://angular.io/guide/dynamic-form

于 2020-06-10T17:56:30.547 回答