Angular 2+ forumBuilder空字段

时间:2018-01-11 15:58:51

标签: angular

我已经通过formBuilder创建了一个表单,其中包含select,options和input。当我将表单变为变量并将其打印到控制台时,我得到:

{town: null, subject: ƒ, level: ƒ, priceMin: ƒ, priceMax: ƒ}
\/
level: ƒ String()
priceMax: ƒ Number()
priceMin: ƒ Number()
subject: ƒ String()
town: null

我需要在函数中创建一个自定义表单并将其传递给另一个函数,但是当我想将变量字段视为空时,设置为什么值?我应该在level,priceMin,priceMax字段中添加什么值?

我在component.ts中的功能

let form = {
    "town": null,
    "subject" : lesson, 
    "levels": null,
    "priceMin": null,
    "priceMax": null
};      

searchParametrsComponent.onSearchSubmit(form, this.privateLessons);

我的表格HTML代码:

  <form 
    class="primary-data form-group"
    [formGroup]="searchForm"
    (ngSubmit)="onSearchSubmit(searchForm.value)"
  >
    <h4 class="primary-data__title">Filtry</h4>
    <div class="primary-data__subject">
    </div>
    <div class="primary-data__city">
       <div class="city">
        <label class="city__label" for="city">Miejscowość:</label>
        <input 
          type="text" 
          class="form-control" 
          id="town"
          formControlName="town"
        >
       </div>
    </div>

    <div class="primary-data__subject">
      <div class="subject">
        <label class="subject__label">Przedmiot:</label>
        <div class="form-group select select--subject">
          <select  
            class="form-control"
            #selectedItem
            required
            formControlName="subject"
          >
            <option value="" [ngValue]="null" disabled selected>Kategoria</option>
            <option 
              class="subject-option"
              *ngFor="let subject of lessonSubjects"
            >
              {{ subject }}
            </option>

          </select>
      </div>

      </div>
    </div>

    <div class="primary-data__range">
      <div class="range">
        <label class="range__label">Zakres Materiału:</label>
        <div class="form-group select select--range">
          <select  
            class="form-control"
            #selectedItem
            required
            formControlName="level"
          >
            <option value="" disabled selected>Poziom</option>
            <option class="range-option">Szkoła podstawowa</option>
            <option class="range-option">Gimnazjum</option>
            <option class="range-option">Liceum</option>
            <option class="range-option">Studia</option>
          </select>
      </div>

      </div>
    </div>
    <div class="primary-data__price">
      <div class="price">
        <div class="price__title">Cena:</div>

        <label for="city">od:</label>
        <input 
          type="number" 
          class="form-control price__input" 
          id="from"
          formControlName="priceMin"
        >

        <label for="city">do:</label>
        <input 
          type="number" 
          class="form-control price__input" 
          id="from"
          formControlName="priceMax"
        >

      </div>
    </div>
    <input type="submit" class="btn btn-primary primary-data__button" value="SZUKAJ">
  </form>

1 个答案:

答案 0 :(得分:0)

  当我想将变量字段视为空时,

[W]将值设置为它?

您选择字段为空时的含义。对于文本字段,常见的选择是''(空字符串),nullundefined,但它在很大程度上取决于控件值访问器的实现方式,以便在视觉上将其视为“空” ”

  

我应该在level,priceMin,priceMax字段中添加什么值?

见上文。