Question

我有一个select下拉列表，具有默认的选定禁用值，以及从后端加载的区域列表。我的问题是，下拉菜单从不显示所选值，而始终显示为空白。

<form [formGroup]="districtForm">
  District:
  <select formControlName="districtControl" (change)="filterBuildings($event.target.value)" [value]='' class="form-control">
    <option value="" disabled selected>Please select district</option>
    <option *ngFor="let district of districts" [ngValue]="district">
      {{district.districtName}}
    </option>
  </select>
  <div *ngIf="errorMessageDistrict" class="text-danger">District is required
  </div>
</form>

这是我的ts代码：

import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { InfoService } from '../../services/info.service';
import { first } from 'rxjs/operators';
import { District } from '../../models/district';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-school-switch',
  templateUrl: './school-switch.component.html',
  styleUrls: ['./school-switch.component.scss']
})
export class SchoolSwitchComponent {
  districts: District[] = [];
  selectedDistrict: District;
  errorMessageDistrict;
  firstDistrict: any;
  districtForm = new FormGroup({
    districtControl: new FormControl()
  });

  constructor(
    public activeModal: NgbActiveModal,
    private infoService: InfoService,
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.infoService
      .getDistricts()
      .pipe(first())
      .subscribe(districts => {
        this.districts = districts;
      });
  }

  filterBuildings(filterVal: any) {
      this.selectedDistrict = this.districtForm.value.districtControl;
      //some more code
  }

Answer 1

摆脱[value]，而在您的Template中将[(ngModel)]与selectedDistrict一起使用select和'none'，在TypeScript类中将其初始化为[ngValue]。还将<form [formGroup]="districtForm"> District: <select formControlName="districtControl" [(ngModel)]="selectedDistrict" class="form-control"> <option [ngValue]="'none'" disabled selected> Please select district </option> <option *ngFor="let district of districts" [ngValue]="district"> {{district.districtName}} </option> </select> <div *ngIf="errorMessageDistrict" class="text-danger"> District is required </div> </form>添加到“占位符选项”。像这样：

 public void FillComboBox()
  {
        using (var con = SQLConnection.GetConnection())
        {
            using (var cmd = new SqlCommand("SELECT * FROM employee_product", con))
            {
                using (var reader = cmd.ExecuteReader())
                {

                    while (reader.Read())
                    {
                        cbox_order.Items.Add("Code").ToString();
                        cbox_order.Items.Add("Model").ToString();
                        cbox_order.Items.Add("Itemdescription").ToString();
                    }

                }
            }
        }
  }

这里是Sample StackBlitz供您参考。

Answer 2

通常，我在ngOnInit中创建FormGroup，然后像这样定义默认值：

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

constructor(private formBuilder: FormBuilder){
}

ngOnInit(){
      this.districtForm = this.formBuilder.group({
        districtControl: ['myDefaultValue', Validators.required]
      });
}

Answer 3

请勿在Form Control中分配任何默认值，否则您的 Validators.required 将无用，而是在 select option >具有 value =“” 且未禁用的情况，如下所示：

<form [formGroup]="districtForm">
  District:
  <select formControlName="districtControl" class="form-control">
    <option value="">Select District</option>
    <option *ngFor="let district of districts" [value]="district">
      {{district.districtName}}
    </option>
  </select>
  <div *ngIf="errorMessageDistrict" class="text-danger">District is required
  </div>
</form>

Component.ts中的表单控件：

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

constructor(private formBuilder: FormBuilder){
}

districtForm: FormGroup;

ngOnInit(){
      this.createDistrictForm();
}

createDistrictForm(){
    this.districtForm = this.formBuilder.group({
        districtControl: ['', Validators.required]
      });
}

Angular 6选择默认值不起作用

3 个答案: