FormGroup上的Angular，Error，无法读取未定义的属性“length”

Question

我遇到FormControl的问题。

我收到错误Cannot read property 'length' of undefined

昨天我没有这个问题，当我第一次启动ngclient时就出现了。

任何想法？

非常感谢

编辑1.我添加代码

以下是组件的代码：

@Component({
  selector: 'app-links-onboarding',
  templateUrl: './onboarding.component.html',
  styleUrls: ['./onboarding.component.css']
})
export class OnboardingComponent {
  public ages: [number] = [5];

  @ViewChild("search")
  searchElementRef: ElementRef;

  onboardingForm = new FormGroup({
    day: new FormControl(),
    months: new FormControl(),
    year: new FormControl(),
    firstName: new FormControl(),
    lastName: new FormControl()
  });

  constructor(private mapsApiLoader: MapsAPILoader, private api: ApiService)
 {
    for(let i = 6; i <= 100; i++) {
      this.ages.push(i);
    }
  }

  public ngOnInit() {
    this.mapsApiLoader.load().then(_ => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement)
    });
  }

  onSubmit() {
    let day = this.onboardingForm.value.day;
    let months = this.onboardingForm.value.months;
    let year = this.onboardingForm.value.year;
    let firstname = this.onboardingForm.value.firstName;
    let lastname = this.onboardingForm.value.lastName;
    let location = this.searchElementRef.nativeElement.value;

    this.api.editUser({
      day,
      months,
      year,
      firstname,
      lastname,
      location
    }).subscribe();
  }

}

以下是模板的代码：

<div id="onboarding">
      <form [formGroup]="onboardingForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="">When were you born? *</label>
          <div class="date-picker">
            <input type="number" name="day" id="day" placeholder="Day" formControlName="day" required>
            <select name="months" id="months" formControlName="months" required>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
            <input type="number" min="1900" placeholder="Year" name="year" id="year" formControlName="year" required>
          </div>
        </div>
        <div class="form-group">
          <label for="">What's your first name? *</label>
          <input type="text" name="firstname" id="firstname" formControlName="firstName" required>
        </div>
        <div class="form-group">
          <label for="">What's your last name? *</label>
          <input type="text" name="lastname" id="lastname" formControlName="lastName" required>
        </div>
        <div class="form-group">
          <label for="">Where do you live?</label>
          <input type="text" spellcheck="off" autocomplete="off" autocapitalize="off" #search required>
        </div>
        <div>
          <button type="submit">→</button>
        </div>
        <div>
          * fields required
        </div>
      </form>
    </div>

我没有IDE。我正在使用sublime-text

Answer 1

经过长时间的讨论，我们推断出api方法中存在的问题：

public editUser(user): Observable<any> {
    let url = configApp.api_url + '/users/edit';
    return this.http.put(url, JSON.stringify(user), {
      headers: new HttpHeaders({
        'Content-Type':'application/json',
        'token':this.cookies.get('token')
      })
    }).map(res => res);
  }

this.cookies.get（＆＃39; token＆＃39;）应该是this.cookies.get（＆＃39; x-token-x＆＃39;）而不是。