Tukukkk

I am trying to bind user data in input values. The point is that in the form were already used ng-for for getting data for selects. However, I can't figure out how to bind data on input values. I thought there should be other ng for in form but it's not working. This page is the user settings component where the user will see his/her details in inputs and can update them.

TypeScript

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

import { FormArray, FormControl, FormGroup, Validators,ControlValueAccessor,ValidatorFn,ValidationErrors} from '@angular/forms';

import { Router } from '@angular/router';

import {country, Countries} from "../../models/countries.model";







@Component({

  selector: 'app-settings',

  templateUrl: './settings.component.html',

  styleUrls: ['./settings.component.css']

})

export class SettingsComponent implements OnInit {

  users: any = [ 

    {

      username: 'Jess',

      name: 'Jessica',

      lastname: 'Scott',

      gender: 'Female',

    }, 

  ];

  SettingsForm: FormGroup;

  forbiddenEmails: any;

  errorMessage: string;



  countries:Countries=country;



  genders = [

    "Male",

    "Female",

    "Other"

  ];







  constructor (

    public nav: HeaderService,

    private authService: AuthService,

    private router: Router,

    private tokenService: TokenService) {

      this.SettingsForm = new FormGroup({

        'username': new FormControl(null, [Validators.required,

       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])'),

        ]),

        'name': new FormControl(null, [Validators.required,

       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])'),

        ]),

       ...

       ...

       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),

        'country': new FormControl(this.countries[0], [Validators.required, ]),

        'gender': new FormControl(this.genders[0], [Validators.required, ]),



      });

    }





  ngOnInit() {

  }



onSubmit() {

   this.SettingsForm.reset();

}



}

HTML

<form action="" [formGroup]="SettingsForm" *ngFor="let user of users" (ngSubmit)="settingsUser()">

<div class="form-group form-settings">

<input _ngcontent-c0="" class="form-control form-control-lg"  placeholder="username" type="text" id="username" formControlName="username"/>

<span *ngIf="!SettingsForm.get('username').valid && SettingsForm.get('username').touched" class="help-block">Please enter a valid username!</span>

</div>

<div class="form-group form-settings">

  <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text" id="email" formControlName="email"/>

  <span *ngIf="!SettingsForm.get('email').valid && SettingsForm.get('email').touched" class="help-block">Please enter a valid email!</span>

</div>

<div class="row">

<div class="form-group form-settings col-md-12">

<select class="form-control form-control-lg">

    <option value="">--Please choose an option--</option>

    <option ngDefaultControl [ngValue]="country" *ngFor="let country of countries" formControlName="country">{{country.name}}</option>

</select>

    <span *ngIf="!SettingsForm.get('country').valid && SettingsForm.get('country').touched" class="help-block">Please enter a country!</span>

</div>

</div>

<div class="row">

<div class="form-group form-settings col-md-12">

<select class="form-control form-control-lg">

    <option value="">--Gender--</option>

    <option ngDefaultControl [ngValue]="gender" *ngFor="let gender of genders" formControlName="gender">{{gender}}</option>

</select>

    <span *ngIf="!SettingsForm.get('gender').valid && SettingsForm.get('gender').touched" class="help-block">Please choos a gender!</span>

</div>

<div class="form-group form-settings">

  <div>



      <button type="submit" class="  btn form-btn btn-lg btn-block submit-btn">Sign In With Email</button>



  </div>

</div>

</form>

How can display user details from the array on each input or select as a value?