首页 > 解决方案 > Angular:ng build --prod 执行时未检测到反应式表单控件

问题描述

我使用 Angular 创建了一个响应式表单。在我的模板中,我已经声明了formControlName属性并为它们命名,在 .ts 组件中,我也将它们声明为formControlsa 的成员FormGroup,但是,当我执行时ng build --prod,我收到一条错误消息,指出它们不存在于.ts。

这是我的表格:

 <form ngNativeValidate [formGroup]="forma" class="form-horizontal" novalidate>
      <div class="row doc-row">
        <div class="col-sm-6">
          <!-- Fecha desde-->
          <label class="col-sm-1 control-label lh-11 documento-label">Fecha desde</label>
          <div class="col-sm-4">
            <input type="date" formControlName="fechaDesde" name="fechaDesde" id="fechaDesde" type="date"
              class="form-control" />
          </div>
          <span #dp="bsDatepicker" bsDatepicker class="fa fa-search facturas col-sm-1 " [(bsValue)]="fechaDesde"></span>

          <!-- Fecha hasta-->
          <label class="col-sm-1 control-label lh-11 documento-label">Fecha hasta</label>
          <div class="col-sm-4">
            <input type="date" formControlName="fechaHasta" name="fechaHasta" id="fechaHasta" type="date"
              class="form-control" />
          </div>
          <em #dp="bsDatepicker" bsDatepicker class="fa fa-search facturas col-sm-1 " [(bsValue)]="fechaHasta"></em>
        </div>
        <div class="col-sm-6 text-right">
          <button class="btn btn-oval btn-sm ml-2 " (click)="creaSolicitudFolio()" type="button">
            Nuevo
          </button>
          <button class="btn btn-oval btn-sm ml-2 " (click)="buscaFolios()" type="button">
            Buscar
          </button>
        </div>
      </div>
      <!-- SEGUNDA COLUMNA -->
      <div class="row doc-row mt-2">
        <div class="col-sm-6">
          <!-- Cantidad desde-->
          <label class="col-sm-1 control-label lh-11 documento-label">Cantidad desde</label>
          <div class="col-sm-4">
            <input type="date" formControlName="cantidadDesde" name="cantidadDesde" id="cantidadDesde" type="text"
              class="form-control" />
          </div>
          <span #dp="bsDatepicker" bsDatepicker class="fa fa-search facturas col-sm-1 "
            [(bsValue)]="cantidadDesde"></span>

          <!-- Cantidad hasta-->
          <label class="col-sm-1 control-label lh-11 documento-label">Cantidad hasta</label>
          <div class="col-sm-4">
            <input type="date" formControlName="cantidadHasta" name="cantidadHasta" id="cantidadHasta" type="text"
              class="form-control" />
          </div>
          <em #dp="bsDatepicker" bsDatepicker class="fa fa-search facturas col-sm-1 " [(bsValue)]="cantidadHasta"></em>
        </div>

        <div class="col-sm-6">
          <!-- tipo documento -->
          <label class="col-sm-1 control-label lh-11 documento-label">Tipo</label>
          <div class="col-sm-4">
            <select class="form-control pv-0" formControlName="tipoFactura" name="tipoFactura">
              <option *ngFor="let tipofactura of tiposfacturas" [value]="tipofactura.par_codparametro01">
                {{tipofactura.par_deslargo01}}</option>
            </select>
          </div>
        </div>
      </div>

    </form>

这就是它们在 .ts 文件中的声明方式:

  constructor( ) {
    this.forma = new FormGroup({
      fechaDesde: new FormControl(''),
      fechaHasta: new FormControl(''),
      cantidadHasta: new FormControl(''),
      cantidadDesde: new FormControl(''),
      tipoFactura: new FormControl('')
    });
  }

我不能让他们通过测试,我不知道为什么。

任何想法?

谢谢。

标签: angularangular-reactive-forms

解决方案


ng build --prod如果没有构建问题并且它与反应形式无关,则应该可以工作。

如果可行,请检查此讨论。 角反应形式绑定不起作用


推荐阅读