Dynamic form select field with dynamic options from provider


#1

Hello Everyone,

I am working in a project which involves getting some data from server and use those as default options for a form in ionic app.

for example :

In constructor there is private fb: FormBuilder

    this.quoteForm = fb.group({
        'project_type': ['', Validators.required],
        'budget': {'lower':0,'upper': 100000},
        'timeframe': '',
        'about_project': '',
        'name': ['', Validators.required],
        'email': ['', Validators.required],
        'phone': '',
        'company': ['', Validators.required],
        'home': ['', Validators.required],
        'about_us': ['', Validators.required],
        'contact_us' : ['', Validators.required],
      });

In view one select element :

<ion-select formControlName="contact_us" multiple="true" (ionChange)="calculateCost()">
            <ion-option *ngFor="let sec of sections" value="{{sec.min_price}}">{{sec.name}}</ion-option>
</ion-select>

Please note I need to create or clone this select element when user click add more. and the options are in loop as its showing.

I have two questions to ask:
How can I create or clone the select element with all the things mentioned there?
How can I add the dynamic formControName to the form group mentioned at the beginning of this post?