Question

更新

 <select (blur)="stateValidate('State *Required', 'State Name')" class="form-control" id="state_address" formControlName="state_address">
                      <option *ngFor="let state of states">{{state}}</option>

我有一个表单，我根据数据库中用户的数据填写值。我可以将所有值添加到表单中，如下所示

city_address: new FormControl(this.contractData.city_address, [
        Validators.required,
        Validators.pattern("^[a-zA-Zñáéíóúü' ]{1,30}$")
      ]),

但是当我尝试将状态添加到组合框时，它不提供值。

// this does not work.
    state_address: new FormControl(this.contractData.state_address, [
    Validators.required
  ]),

为什么会出现这种情况？根据存储在数据库中的用户数据，将值添加到组合框的正确方法是什么？

HTML

 <form [formGroup]="contractForm" novalidate (ngSubmit)="saveContract(contractForm.value, contractForm.valid)" (window:resize)="beResponsive()">
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div class="card card-inverse card-success">
            <div class="card-header">
              <strong>Personal Information</strong>
            </div>
            <div class="card-block">
              <!-- Start Phone Section -->
              <div class="row">
                <div class="form-group col-sm-12 col-md-4">
                  <label for="first_name">First Name</label>
                  <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-user"></i>
                  </span>

                    <input (blur)="cityValidate('City *Required', 'City Name')" type="text" class="form-control" placeholder="Enter city name" id="city_address" formControlName="city_address">
                  </div>
                </div>
                <div class="form-group col-sm-12 col-md-4">
                  <label for="state_address">State</label>
                  <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-street-view"></i>
                  </span>

FORMGROUP

  this.contractForm = new FormGroup({
      signatureField1 : new FormControl('',Validators.required ),
      email : new FormControl(this.contractData.email,Validators.required ),
      first_name: new FormControl(this.contractData.first_name,[
        Validators.required,
        Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
      ]),
      middle_name: new FormControl(this.contractData.middle_name,[
        Validators.required,
        Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
      ]),
      last_name: new FormControl(this.contractData.last_name,[
        Validators.required,
        Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
      ]),
      employer: new FormControl(null, [
        Validators.required,
        Validators.pattern("^[a-zA-Zñáéíóúü' ]{1,30}$")
      ]),
      dob : new FormControl (this.contractData.dob, [
        Validators.required,
        Validators.pattern("[1][9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]|[2][0][0-9][0-9]-[0-9][0-9]-[0-9][0-9]")
      ]),
      client_ss: new FormControl(this.contractData.client_ss, [
        Validators.required,
        Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9]/[0-9][0-9]/[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]")
      ]),
      phone: new FormControl(this.contractData.phone, [
        Validators.required,
        Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]"),
      ]),
      work_phone: new FormControl(null, [
        Validators.required,
        Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]"),
      ]),
      fax_phone: new FormControl(null, [
        Validators.required,
        Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]"),
      ]),
      street_address: new FormControl (this.contractData.street_address, [
        Validators.required,
        Validators.pattern("^[0-9]+ .+$")
      ]),
      city_address: new FormControl(this.contractData.city_address, [
        Validators.required,
        Validators.pattern("^[a-zA-Zñáéíóúü' ]{1,30}$")
      ]),
      state_address: new FormControl(this.contractData.state_address, [
        Validators.required
      ]),
      zip_address: new FormControl(this.contractData.zip_address, [
        Validators.required,
        Validators.pattern("[0-9][0-9][0-9][0-9][0-9]")
      ]),
      client_dl: new FormControl(null, [
        Validators.required
      ]),
      dl_state: new FormControl(null, [
        Validators.required
      ]),
    });

Answer 1

您要将选项文本设置为state。您应该将value设置为state;

<option *ngFor="let state of states" [value]="state">{{ state }}</option>

使用FormControl在Angular 2中为Combobox添加值

1 个答案: