title: Material Autocomplete in FormGroup - typescript
body: <p>In my project, I want to use Material Autocomplete for country. Country get all from my ws. I was able to show all states, but what I want is to select the state to send ws. So, I want to put it in the formgroup. </p>
  
  <p>component.html</p>
  
  <pre><code>&lt;form [formGroup]="registerUserForm" (ngSubmit)="onRegisterUser()" class="col s12" materialize&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
        &lt;input formControlName="username" id="username" type="text" class="validate" placeholder="Enter Username" minlength="3" maxlength="20"
          required="" [ngClass]="{invalid: invalidInputs}"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
        &lt;input formControlName="email" id="email" type="email" class="validate" placeholder="Enter Email" required="" aria-required="true"
          [ngClass]="{invalid: invalidInputs}"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Autocomplete Country Material--&gt;
  
    &lt;input formControlName="country_id" id="country_id" matInput placeholder="Select Country" aria-label="State" [matAutocomplete]="auto"
      autoActiveFirstOption [formControl]="myControlCountry"&gt;
    &lt;mat-autocomplete #auto="matAutocomplete"&gt;
      &lt;mat-option *ngFor="let country of filteredOptionsCountry | async" [value]="country.name"&gt;
        {{ country.name }}
      &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
  
   &lt;!-- End Autocomplete Country --&gt;
  
  
    &lt;div id="register_user_button_container" class="row"&gt;
      &lt;button id="register_user_button" type="submit" class="btn waves-effect waves-light"&gt;
        Register
      &lt;/button&gt;
      &lt;button id="cancel_button" (click)="onCancel()" class="btn waves-effect waves-light grey lighten-4 black-text"&gt;
        Cancel
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <p>export class AddUserFormComponent implements OnInit {
       countryes: Country[];</p>
  
  <pre><code>  registerUserForm: FormGroup;
  
  
    filteredOptionsCountry: Observable&lt;Country[]&gt;;
    myControlCountry: FormControl = new FormControl();
  
  
  
    constructor(private fb: FormBuilder,
      private router: Router,
  
      private cs: CountryService) 
  {
  
      this.registerUserForm = new FormGroup({
        'username': new FormControl(),
        'email': new FormControl(),
        'country_id': new FormControl(),
      });
  
    }
  
    ngOnInit() {
  
      this.registerUserForm = this.fb.group({
        'username': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
        'country_id': ['', Validators.required],
        'email': ['', [Validators.required, ValidationService.emailValidation]],
      });
  
      this.filteredOptionsCountry = this.myControlCountry.valueChanges.pipe(
        startWith(''),
        map(val =&gt; this.filterCountry(val))
      );
  
      this.cs.getAllCountry().subscribe(
        countryes =&gt; {
          this.countryes = countryes.map((country) =&gt; {
            return new Country(country);
          });
        }
      );
  
    }
  
    onRegisterUser() {
      this.loading = true;
      this.invalidInputs = true;
  
      let newUser = new User(
        this.registerUserForm.value
      );
  
      this.userService.createUser(newUser).subscribe(
      );
    }
  
    onCancel() {
      this.router.navigate(['/main/users']);
    }
  
  
    //Country
  
    filterCountry(val: string): Country[] {
      if (val) {
        let filterValue = val.toLowerCase();
        console.log(this.countryes)
        return this.countryes.filter(country =&gt; country.name.toLowerCase().startsWith(filterValue));
      }
  
      return this.countryes;
    }
  
  }
  </code></pre>
  
  <p>In html code I use also formControlName="country_id" id="country_id"  but don't work nothing.  More over, I use and ReactiveFormsModule. Can you suggest me any solution? Thank you!</p>