Using Angular's Formgroup Validators

[Standaa]

Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x ] feature request

OS and Version?

MacOS Mojave

Versions

Angular CLI: 7.3.3
Node: 11.6.0
OS: darwin x64
Angular: 7.2.6

Desired functionality

Is it possible to make the field mandatory using the directive ?

[Standaa]

I ended up adding a formControl to manage the input. Would be great to have the option to make the input field mandatory.
Thanks for the awesome library.

[AnthonyNahas]

Hey @stanislasdrg thank for using the library! I am glad to know that other developers are using this extension <3

can you please post the code on how you are using the library ?
Please keep in mind that there is two ways to consume the lib

• via component
• via directive

if you using the directive https://github.com/angular-material-extensions/google-maps-autocomplete#as-directive
--> then you habe the full control of the input component, form control as well as the target form group

[Standaa]

Hey @AnthonyNahas !
I am using the directive, as it was the most adequate to my use case. Here is the code in my template :

  <mat-form-field>
            <mat-label>Address</mat-label>
            <input matInput
                 matGoogleMapsAutocomplete
                 (onAutocompleteSelected)="onAutocompleteSelected($event)"
                 (onLocationSelected)="onLocationSelected($event)" formControlName="address" required>
          </mat-form-field>

I added a formControl on top of your APIs so that I could add a validator in my component :

this.myFormGroup = this.formBuilder.group({
      ...,
      address: ['', Validators.required, Validators.minLength(2)]
    });

This workaround is working, but I expected the API to have something simple like :

  <mat-form-field>
            <mat-label>Address</mat-label>
            <input matInput
                 matGoogleMapsAutocomplete
                 addressRequired  <------
                 (onAutocompleteSelected)="onAutocompleteSelected($event)"
                 (onLocationSelected)="onLocationSelected($event)" formControlName="address" required>
          </mat-form-field>

I had a quick look at the code and could not see anything like it in the directive's inputs. I saw some validation in the address directive though, but was unsure as to what it related to.

Thanks !

so matValidateAddress is not it?

[AnthonyNahas]

@doom777 the validator is a little bit buggy... and should be updated! Can you pls try it ? I will appreciate your feedback!

Please keep in mind that in the future, the directive will provide access to it built in form controller to enable external reactive forms within the app

[tommueller]

Any news on this?

[AnthonyNahas]

the best way for the moment to create your own form control add patch the value emitted from the library

[AnthonyNahas]

this has been already done by v4.1.0

<form [formGroup]="addressFormGroup">
    <mat-search-google-maps-autocomplete formControlName="address">
    </mat-search-google-maps-autocomplete>
    
    // OR

    <mat-google-maps-autocomplete formControlName="address">
    </mat-google-maps-autocomplete>

</form>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  addressFormGroup: FormGroup;

  ngOnInit(): void {
    this.addressFormGroup = new FormGroup({
      address: new FormControl(),
    });

    this.addressFormGroup.get('address').valueChanges.subscribe(value => console.log('value changed', value))
  }
}