ReactiveFormModule和Angular 5在隐藏字段中没有数据

Question

我有一个带有隐藏字段的表单但是他的数据总是收到一个未定义的值。

我做错了什么？

这是我的组件代码。

      <form [formGroup]="wantPackageForm" (ngSubmit)="submitWantPackageForm(wantPackageForm.value); wantPackageForm.reset()" method="post" novalidate>

        <!-- Modal Header -->
        <div class="modal-header">
          <img src="assets/imgs/ic-plus-blanco.svg" alt="">
          <div class="modal-title">
            <h5>Paquete</h5>
            <h4>PLUS</h4>
          </div>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">

          <h3>
            Si estas interesado en este paquete escríbenos y pronto nos pondremos en contacto contigo.
          </h3>

          <div class="form-group">
            <input type="hidden" id="inputPackage" formControlName="inputPackage">
          </div>

          <div class="form-group">
            <input type="text" class="form-control" id="inputName" formControlName="inputName"
                   placeholder="Nombre" required>
            <div class="alert-message-wrapper"
                 *ngIf="!wantPackageForm.controls['inputName'].valid && wantPackageForm.controls['inputName'].touched">
              <!--<p>{{ alertMessage }}</p>-->
              <p>Ingrese su nombre completo.</p>
            </div>
          </div>

          <div class="form-group">
            <input type="email" class="form-control" id="inputEmail" formControlName="inputEmail"
                   placeholder="Correo electrónico" required>
            <div class="alert-message-wrapper"
                 *ngIf="!wantPackageForm.controls['inputEmail'].valid && wantPackageForm.controls['inputEmail'].touched">
              <p>Ingrese un correo electrónico valido.</p>
            </div>
          </div>

          <div class="form-group">
            <input type="text" class="form-control" id="inputPhone" formControlName="inputPhone"
                   placeholder="Teléfono" required>
            <div class="alert-message-wrapper"
                 *ngIf="!wantPackageForm.controls['inputPhone'].valid && wantPackageForm.controls['inputPhone'].touched">
              <p>Este campo es obligatorio y debe de contener un número de teléfono de 10 digitos.</p>
            </div>
          </div>

          <div class="form-group">
            <textarea class="form-control" id="inputMessage" formControlName="inputMessage"
                      placeholder="Mensaje" required></textarea>
            <div class="alert-message-wrapper"
                 *ngIf="!wantPackageForm.controls['inputMessage'].valid && wantPackageForm.controls['inputMessage'].touched">
              <p>Este campo es obligatorio y debe contener minimo 25 caracteres en su mensaje.</p>
            </div>
          </div>

        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="submit" class="btn color-green border-green btn-rounded-17"
                  [disabled]="!wantPackageForm.valid">Enviar
          </button>
        </div>
      </form>

这是我在Component.html中的内容，当我将表单发送到我的component.ts文件时...... inputPackage隐藏字段永远不会有值。

这是我的表格代码。

  <form [formGroup]="wantPackageForm" (ngSubmit)="submitWantPackageForm(wantPackageForm.value); wantPackageForm.reset()" method="post" novalidate>

    <!-- Modal Header -->
    <div class="modal-header">
      <img src="assets/imgs/ic-plus-blanco.svg" alt="">
      <div class="modal-title">
        <h5>Paquete</h5>
        <h4>PLUS</h4>
      </div>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>

    <!-- Modal body -->
    <div class="modal-body">

      <h3>
        Si estas interesado en este paquete escríbenos y pronto nos pondremos en contacto contigo.
      </h3>

      <div class="form-group">
        <input type="hidden" id="inputPackage" formControlName="inputPackage">
      </div>

      <div class="form-group">
        <input type="text" class="form-control" id="inputName" formControlName="inputName"
               placeholder="Nombre" required>
        <div class="alert-message-wrapper"
             *ngIf="!wantPackageForm.controls['inputName'].valid && wantPackageForm.controls['inputName'].touched">
          <!--<p>{{ alertMessage }}</p>-->
          <p>Ingrese su nombre completo.</p>
        </div>
      </div>

      <div class="form-group">
        <input type="email" class="form-control" id="inputEmail" formControlName="inputEmail"
               placeholder="Correo electrónico" required>
        <div class="alert-message-wrapper"
             *ngIf="!wantPackageForm.controls['inputEmail'].valid && wantPackageForm.controls['inputEmail'].touched">
          <p>Ingrese un correo electrónico valido.</p>
        </div>
      </div>

      <div class="form-group">
        <input type="text" class="form-control" id="inputPhone" formControlName="inputPhone"
               placeholder="Teléfono" required>
        <div class="alert-message-wrapper"
             *ngIf="!wantPackageForm.controls['inputPhone'].valid && wantPackageForm.controls['inputPhone'].touched">
          <p>Este campo es obligatorio y debe de contener un número de teléfono de 10 digitos.</p>
        </div>
      </div>

      <div class="form-group">
        <textarea class="form-control" id="inputMessage" formControlName="inputMessage"
                  placeholder="Mensaje" required></textarea>
        <div class="alert-message-wrapper"
             *ngIf="!wantPackageForm.controls['inputMessage'].valid && wantPackageForm.controls['inputMessage'].touched">
          <p>Este campo es obligatorio y debe contener minimo 25 caracteres en su mensaje.</p>
        </div>
      </div>

    </div>

    <!-- Modal footer -->
    <div class="modal-footer">
      <button type="submit" class="btn color-green border-green btn-rounded-17"
              [disabled]="!wantPackageForm.valid">Enviar
      </button>
    </div>
  </form>