角表单组未在提交时返回

在这里看一个奇怪的问题。单击提交按钮时，我的角度表单组未返回任何内容。单击时，它也不会登录到控制台。表单本身几乎与我拥有的其他表单完全相同，但效果很好。

我试过删除html组件的某些部分，以查看它是否引起了问题（下拉列表，因为它调用了另一个对象来填充select字段）。我还尝试将表单值和表单状态打印到页面上，但是它不会更新，只会返回[object Object]并保持无效状态。

我不知道是什么原因造成的。我在某处错过了什么吗？

create-locations.component.ts：

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { Clients } from '../../../../_models/clients';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { AlertifyService } from '../../../../_services/alertify.service';
import { ActivatedRoute } from '@angular/router';
import { Locations } from '../../../../_models/locations';
import { LocationService } from '../../../../_services/location.service';

@Component({
  selector: 'app-create-locations',
  templateUrl: './create-locations.component.html',
  styleUrls: ['./create-locations.component.scss']
})
export class CreateLocationsComponent implements OnInit {
  @Output() cancelRegister = new EventEmitter();
  client: Clients[];
  locations: Locations;
  createLocForm: FormGroup;

  constructor(private locationService: LocationService, private alertify: AlertifyService, private fb: FormBuilder,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.client = data['clients'].result;
    });
    this.createLocationForm();
  }

  createLocationForm() {
    this.createLocForm = this.fb.group({
      LocationName: new FormControl('', Validators.required),
      ContactFirstName: new FormControl('', [Validators.required]),
      ContactLastName: new FormControl('', Validators.required),
      ContactPhone: new FormControl('', Validators.required),
      StreetAddress: new FormControl('', Validators.required),
      City: new FormControl('', Validators.required),
      State: new FormControl('', Validators.required),
      Country: new FormControl('', Validators.required),
      PostalCode: new FormControl('', Validators.required),
      AssociatedClient: new FormControl('', Validators.required),
      ValidFrom: new FormControl(),
      ValidTo: new FormControl(),
      ClientId: new FormControl()
    });
  }

  createLocation() {
    if (this.createLocForm.valid) {
      this.locations = Object.assign({}, this.createLocForm.value);
      console.log(this.createLocForm.value);
      this.locationService.CreateLocations(this.locations).subscribe(() => {
        this.alertify.success('Registration created successfully');
      }, error => {
        this.alertify.error(error);
      });
    }
  }

  cancel() {
    this.cancelRegister.emit(false);
    console.log('cancelled');
  }
}

create-location.component.html：

<div class="row">
  <div class="col-md-12">
    <div class="card card-user">
      <div class="card-header">
        <h5 class="card-title">Create New Location</h5>
      </div>
      <div class="card-body">
        <form [formGroup]="createLocForm"
          (ngSubmit)="createLocation()"
          enctype="multipart/form-data"
          >
          <div class="row">
            <div class="col-md-5 pr-1">
              <div class="form-group">
                <label>Location Name</label>
                <input type="text"
                [ngClass]="{'is-invalid': createLocForm.get('LocationName').errors && createLocForm.get('LocationName').touched}"
                class="form-control"
                formControlName="LocationName"
                placeholder="Complete Security Ltd."/>
                <div class="invalid-feedback">Please enter the location name</div>
              </div>
            </div>
            <div class="col-md-3 px-1">
              <div class="form-group">
                <label>Contact First Name</label>
                <input
                  type="text"
                  [ngClass]="{'is-invalid': createLocForm.get('ContactFirstName').errors && createLocForm.get('ContactFirstName').touched}"
                  formControlName="ContactFirstName"
                  class="form-control"
                  placeholder="John"
                />
                <div class="invalid-feedback">Please enter a contact first name</div>
              </div>
            </div>
            <div class="col-md-4 pl-1">
              <div class="form-group">
                <label for="text">Contact Last Name</label>
                <input
                  type="text"
                  [ngClass]="{'is-invalid': createLocForm.get('ContactFirstName').errors && createLocForm.get('ContactFirstName').touched}"
                  formControlName="ContactFirstName"
                  class="form-control"
                  placeholder="Smith"
                />
                <div class="invalid-feedback">Please enter a contact last name</div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3 pr-1">
              <div class="form-group">
                <label>Phone Number</label>
                <input
                  type="text"
                  [ngClass]="{'is-invalid': createLocForm.get('ContactPhone').errors && createLocForm.get('ContactPhone').touched}"
                  formControlName="ContactPhone"
                  class="form-control"
                  placeholder="604-929-3929"
                />
                <div class="invalid-feedback">Please enter a phone number</div>
              </div>
            </div>
              <div class="col-md-9 pr-1">
                <div class="form-group">
                  <label>Street Address</label>
                  <input
                    type="text"
                    [ngClass]="{'is-invalid': createLocForm.get('StreetAddress').errors && createLocForm.get('StreetAddress').touched}"
                    formControlName="StreetAddress"
                    class="form-control"
                    placeholder="123 Main St"
                  />
                  <div class="invalid-feedback">Please enter a street address</div>
                </div>
              </div>
          </div>
          <div class="row">
            <div class="col-md-3 pr-1">
              <div class="form-group">
                <label>City</label>
                <input
                  type="text"
                  [ngClass]="{'is-invalid': createLocForm.get('City').errors && createLocForm.get('City').touched}"
                  formControlName="City"
                  class="form-control"
                  placeholder="North Vanouver"
                />
                <div class="invalid-feedback">Please enter a city</div>
              </div>
            </div>
            <div class="col-md-3 pr-1">
              <div class="form-group">
                <label>State</label>
                <input
                  type="text"
                  [ngClass]="{'is-invalid': createLocForm.get('State').errors && createLocForm.get('State').touched}"
                  formControlName="State"
                  class="form-control"
                  placeholder="BC"
                />
                <div class="invalid-feedback">Please enter a state</div>
              </div>
            </div>
            <div class="col-md-3 px-1">
              <div class="form-group">
                <label>Country</label>
                <input
                  type="text"
                  [ngClass]="{'is-invalid': createLocForm.get('Country').errors && createLocForm.get('Country').touched}"
                  formControlName="Country"
                  class="form-control"
                  placeholder="Canada"
                />
                <div class="invalid-feedback">Please enter a country</div>
              </div>
            </div>
            <div class="col-md-3 pl-1">
              <div class="form-group">
                <label>Postal Code</label>
                <input
                  type="text"
                  [ngClass]="{'is-invalid': createLocForm.get('PostalCode').errors && createLocForm.get('PostalCode').touched}"
                  formControlName="PostalCode"
                  class="form-control"
                  placeholder="V7H 1S6"
                />
                <div class="invalid-feedback">Please enter a postal code</div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 pr-1">
              <div class="form-group">
                <label>Client</label>
                <select id="ClientId"
                class="form-control" 
                formControlName="ClientId">
              <option *ngFor="let client of client" [value]="client.id">
                    {{client.organizationName + " | " + client.username}}
                  </option>
                </select>
                <div class="invalid-feedback">Please select a client</div>
              </div> 
            </div>
            <div class="col-md-4 pr-1">
              <div class="form-group">
                <label>Start Date</label>
                <input
                  formControlName="ValidFrom"
                  type="date"
                  class="form-control"
                />
              </div>
            </div>
            <div class="col-md-4 pr-1">
              <div class="form-group">
                <label>End Date</label>
                <input
                  formControlName="ValidTo"
                  type="date"
                  class="form-control"
                />
              </div>
            </div>
          </div>
          <div class="card-footer">
            <button
              type="submit"
              class="btn btn-sm btn-primary"
              >
              <i class="fa fa-dot-circle-o"></i> Submit
            </button>
            <button
              type="reset"
              class="btn btn-sm btn-danger"
              (click)="cancel()"
              >
              <i class="fa fa-ban"></i> Cancel
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<p>Form Value: {{createLocForm.value}} | json</p>
<p>Form Status: {{createLocForm.status}} | json</p>