I'm trying to achieve a normal autocomplete with values that get read from my JSON and then get shown at a dropdown list to select one of them and after this push them to the server with a normal sign up button. The problem is that always just " " get pushed instead of a value, no matter what I do.

My component.html looks like this:

<mat-form-field class="example-full-width">
    <input matInput placeholder="Country" aria-label="Country" [matAutocomplete]="auto" [formControl]="country">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let country of filteredCountries | async" name="country" [value]="country.name">{{country.name}}</mat-option>
    </mat-autocomplete>
    <mat-error *ngIf="formErrors.country" class="form__error">{{ formErrors.country }} </mat-error>
</mat-form-field>

To filter the things I did what the angular example "Autocomplete overview" showed: https://material.angular.io/components/autocomplete/examples

After a while the filter worked fine and everything is shown like it should be.

The component.ts looks like this for the signUp() method:

public signUp() {

    this.FormService.markFormGroupTouched(this.registerForm);
    console.log(this.registerForm.get("username").value, this.registerForm.get("password").value, this.registerForm.get("email").value, this.registerForm.get("firstname").value, this.registerForm.get("lastname").value, this.registerForm.get("country").value, this.registerForm.get("dateOfBirth").value, this.registerForm.get("gender").value)

    if (this.registerForm.valid) {
      this.registrationService.register(this.registerForm.get("username").value, this.registerForm.get("password").value, this.registerForm.get("email").value, this.registerForm.get("firstname").value, this.registerForm.get("lastname").value, this.registerForm.get("country").value, this.registerForm.get("dateOfBirth").value, this.registerForm.get("gender").value).subscribe(response => console.log(response));

      this.snackbar.open('Succesfully submitted a valid form. yay!', 'Close', {
        duration: 5000,
      });

      this.registerForm.reset();
      this.router.navigate(['login']);
    } else {
      //console.log(this.formErrors)
      this.formErrors = this.FormService.validateForm(this.registerForm, this.formErrors, false)
    }
  }

Of course the form is not valid because the value of country is always " ". A problem I already expected is that I use a FormGroup with Validation and for the autoComplete to work I needed to create a filter with a new FormControl.

At the beginning my code looked different. I had called [formControl]="countryCtrl" but this made problems so I renamed it to my already existing "control".

Also maybe necessary is my FormGroup:

public buildForm() {
    this.registerForm = this.form.group({
      firstname: ['', [Validators.required, Validators.minLength(4), CustomValidators.validateCharacters]],
      lastname: ['', [Validators.required, CustomValidators.validateCharacters]],
      username: ['', [Validators.required, Validators.minLength(4), CustomValidators.validateCharacters]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required]],
      passwordConfirmation: ['', [Validators.required, compareValidator('password')]],
      country: ['', [Validators.required]],
      dateOfBirth: ['', [Validators.required]],
      gender: ['', [Validators.required]],

    });

    this.registerForm.valueChanges.subscribe((data) => {
      this.formErrors = this.FormService.validateForm(this.registerForm, this.formErrors, true)
    });
  }

0 Answers