Angular，FormGroup 上的錯誤，無法讀取未定義的屬性“長度”

Question

我遇到了 FormControl 的 FormGroup 的問題。

我收到錯誤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('token') 應該是 this.cookies.get('x-token-x') 。