Angular，FormGroup 上的错误，无法读取未定义的属性“长度”

Question

I am encountering a problem with FormGroup of FormControl.

I obtain the error Cannot read property 'length' of undefined

I didn't have this issue yesterday, it showed up when I first start the ngclient.

Any Idea?

Thank you a lot

EDIT 1. I add code

Here is the code of the component:

@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();
  }

}

And here is the code of the template:

<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>

I do not have IDE. I am using sublime-text

Answer 1

After a long discussion we deduced that the problem in the api method:

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('token') should have been this.cookies.get('x-token-x') instead.