Range of numbers in angular(typescript)-CodePudding

I'm working on an Ionic(Angular) project and I'm trying to make a select with a specific range of numbers, but I don't want to write them by hand since it's not really efficient but I don't know how to do it in typescript.

As you can see, in "ages" variable I want to have the numbers created as options for the select

this is the typescript file

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-user-appearance',
  templateUrl: './user-appearance.component.html',
  styleUrls: ['./user-appearance.component.scss']
})
export class UserAppearanceComponent  {
  appearanceForm = new FormGroup({
    age: new FormControl(''),
    height: new FormControl(''),
    weight: new FormControl(''),
    ethnicity: new FormControl(''),
    eyesColor: new FormControl(''),
    hairLength: new FormControl(''),
    hairColor: new FormControl('')
  });

  ages: number[] = [1,2,3,4,5,6,7,8,9,10];
  constructor() { }

  submit() {
    console.log(this.appearanceForm.get('age').value);
  }

}

this is the html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
          text="{{'back' | translate}}">
      </ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content >
  <h1>{{'letUsKnowHowYouLook' | translate}}</h1>
  <h3>{{'easyToIdentifyYou' | translate}}</h3>

  <form [formGroup]="appearanceForm" (ngSubmit)="submit()">
    <ion-item >
      <ion-label>{{'age' | translate}}</ion-label>
      <ion-select placeholder='{{"selectOne" | translate}}' formControlName="age">
        <ion-select-option *ngFor="let age of ages">{{age}}</ion-select-option>
      </ion-select>
    </ion-item>
    <app-input [label]="'height'| translate" formControlName="height"></app-input>
    <app-input [label]="'weight'| translate" formControlName="weight"></app-input>
    <app-input [label]="'ethnicity'| translate" formControlName="ethnicity"></app-input>
    <app-input [label]="'eyesColor'| translate" formControlName="eyesColor"></app-input>
    <app-input [label]="'hairLength'| translate" formControlName="hairLength"></app-input>
    <app-input [label]="'hairColor'| translate" formControlName="hairColor"></app-input>


    <ion-button expand="block" type="submit" >{{'confirm' | translate}}</ion-button>
  </form>
</ion-content>

CodePudding user response：

Check with this one.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
 selector: 'app-user-appearance',
 templateUrl: './user-appearance.component.html',
 styleUrls: ['./user-appearance.component.scss']
})
export class UserAppearanceComponent {
 appearanceForm = new FormGroup({
  age: new FormControl(''),
  height: new FormControl(''),
  weight: new FormControl(''),
  ethnicity: new FormControl(''),
  eyesColor: new FormControl(''),
  hairLength: new FormControl(''),
  hairColor: new FormControl('')
});

ages: number[];
constructor() {
 const range = (start, end) => Array.from({ length: (end - start) }, (v, k) => k   start);
 this.ages = range(1, 11);
}

submit() {
 console.log(this.appearanceForm.get('age').value);
 }
}

Main Point is add range in constructor.

ages: number[];
constructor() {
 const range = (start, end) => Array.from({ length: (end - start) }, (v, k) => k  start);
 this.ages = range(1, 11);
}