Retrieving a complete array of countries from the mat-country-select package

Question

Retrieving a complete array of countries from the mat-country-select package

I'm currently working with reactive forms in my Angular project and utilizing mat-country-select to display a list of countries in a select dropdown within my child FormComponent.

<mat-select-country class="full-width"
                            [formControl]="form.controls.country"
                            [required]="true"
                            appearance="outline"
                            [itemsLoadSize]="0"
                            [value]="DEFAULT_COUNTRY"
                            label="Choose country">
          
        </mat-select-country>

I am attempting to create a modal dialog window for updating a Player in the parent PlayerComponent, defined by the structure below:

export interface Player extends BaseResponse {
  lastName: string;
  firstName: string;
  dateOfBirth: Date;
  country: string;
  height: number;
  weight: number;
  position: string;
  jerseyNumber: number;
  teamName: string;
  teamId?: string | null;
  photoPath?: string | null;
}

Prior to opening the update dialog window in the PlayerComponent, I need to initialize and pass a form to my FormComponent.

export class PlayersComponent implements OnInit {
  countries: Country[] = COUNTRIES;
 playerActionsForm!: FormGroup<PlayerActionsForm>;

fillUpdatePlayerForm(player: Player) {
    this.playerActionsForm.controls.id.setValue(player.id);
    this.playerActionsForm.controls.firstName.setValue(player.firstName);
    this.playerActionsForm.controls.lastName.setValue(player.lastName);
    this.playerActionsForm.controls.birthDay.setValue(player.dateOfBirth);
    const country = this.countries.find(
      (country) => country.name === player.country,
    );
    this.playerActionsForm.controls.country.setValue(country ? country : null);
    this.playerActionsForm.controls.height.setValue(player.height);
    this.playerActionsForm.controls.weight.setValue(player.weight);
    this.selectTeams$
      .pipe(
        map((teams) => teams?.find((team) => team.id === player.teamId)),
        take(1),
        untilDestroyed(this),
      )
      .subscribe((team) => {
        this.playerActionsForm.controls.team.setValue(team ? team : null);
      });
    this.playerActionsForm.controls.jerseyNumber.setValue(player.jerseyNumber);
    this.playerActionsForm.controls.position.setValue(player.position);
    this.playerActionsForm.controls.experiences.setValue([]);
  }

  initializeActionsForm() {
    this.playerActionsForm = new FormGroup<PlayerActionsForm>({
      id: new FormControl(''),
      firstName: new FormControl('', [
        Validators.required,
        Validators.pattern(NAME_PATTERN),
      ]),
      lastName: new FormControl('', [
        Validators.required,
        Validators.pattern(NAME_PATTERN),
      ]),
      birthDay: new FormControl(null, [
        Validators.required,
        dateValidator(moment().subtract(18, 'years').toDate(), 'max'),
      ]),
      country: new FormControl(null, Validators.required),
      height: new FormControl(1.01, [
        Validators.required,
        Validators.min(1.01),
      ]),
      weight: new FormControl(50.01, [
        Validators.required,
        Validators.min(50.01),
      ]),
      team: new FormControl(null),
      position: new FormControl('', Validators.required),
      jerseyNumber: new FormControl(0, [
        Validators.required,
        Validators.min(0),
      ]),
      experiences: new FormArray<FormGroup<PlayerExperienceForm>>([]),
    });
  }

  ngOnInit(): void {
    this.initializeActionsForm();
    
  }

Currently, I am trying to utilize ViewChild to access the Input property of mat-country-select [Countries], however, it is not functioning as expected. As of now, I am using a predefined array named COUNTRIES which was manually created. Ideally, I am seeking a solution that can easily retrieve a specific country by name without the need for manually creating constants.

javascript angular typescript angular-material2

Answer 1

Answer №1

To import a list of countries, you can utilize the following steps:

Firstly, install the material-angular/countries package.

ng add @angular-material-extensions/select-country

In your component file, include the necessary imports:

import {Country,MatSelectCountryComponent,COUNTRIES_DB} 
                      from '@angular-material-extensions/select-country'; 

//or, for example, if you prefer the countries in Spanish
import {Country,MatSelectCountryComponent,COUNTRIES_DB_ES} 
               from '@angular-material-extensions/select-country';

Remember: If you wish to use these countries in your HTML template, declare a variable in your TypeScript file.

COUNTRIES=COUNTRIES_DB

When assigning a value to a FormControl that is different from what is displayed, consider using ngModel as shown below:

Simple example:

<mat-select-country [ngModel]="form.get('country')?.value"
                    (ngModelChange)="form.get('country')?.setValue($event)"
                    [ngModelOptions]={standalone:true}
</mat-select-country>

This code performs the same function as a formControl. The ngModel represents the formControl's value and invokes setValue when changed.

If you want to assign the entire object to the formControl, follow this approach:

<mat-select-country  [ngModel]="form.get('country')?.value?.name"
                    (ngModelChange)="setValue(form.get('country'),$event)"
                    [ngModelOptions]={standalone:true}
</mat-select-country>

setValue(control:AbstractControl,countryName:string)
{
  const country=COUNTRIES.find(x=>x.name==countryName)
  control.setValue(country)  
}

Note: You can use either patchValue or setValue methods to fill the formGroup. SetValue requires all properties, while patchValue does not.

const country = this.COUNTRIES.find(
  (country) => country.name === player.country,
);
this.playerActionsForm.setValue({...player,country:country})

Another option would be to simply assign the countryName to the formControl:

const country = this.COUNTRIES.find(
  (country) => country.name === player.country,
);
this.playerActionsFroms.setValue(player)
this.playerActionsForm.controls.country.setValue(country ? country.name : null);

Answer 2

To import a list of countries, you can utilize the following steps:

Firstly, install the material-angular/countries package.

ng add @angular-material-extensions/select-country

In your component file, include the necessary imports:

import {Country,MatSelectCountryComponent,COUNTRIES_DB} 
                      from '@angular-material-extensions/select-country'; 

//or, for example, if you prefer the countries in Spanish
import {Country,MatSelectCountryComponent,COUNTRIES_DB_ES} 
               from '@angular-material-extensions/select-country';

Remember: If you wish to use these countries in your HTML template, declare a variable in your TypeScript file.

COUNTRIES=COUNTRIES_DB

When assigning a value to a FormControl that is different from what is displayed, consider using ngModel as shown below:

Simple example:

<mat-select-country [ngModel]="form.get('country')?.value"
                    (ngModelChange)="form.get('country')?.setValue($event)"
                    [ngModelOptions]={standalone:true}
</mat-select-country>

This code performs the same function as a formControl. The ngModel represents the formControl's value and invokes setValue when changed.

If you want to assign the entire object to the formControl, follow this approach:

<mat-select-country  [ngModel]="form.get('country')?.value?.name"
                    (ngModelChange)="setValue(form.get('country'),$event)"
                    [ngModelOptions]={standalone:true}
</mat-select-country>

setValue(control:AbstractControl,countryName:string)
{
  const country=COUNTRIES.find(x=>x.name==countryName)
  control.setValue(country)  
}

Note: You can use either patchValue or setValue methods to fill the formGroup. SetValue requires all properties, while patchValue does not.

const country = this.COUNTRIES.find(
  (country) => country.name === player.country,
);
this.playerActionsForm.setValue({...player,country:country})

Another option would be to simply assign the countryName to the formControl:

const country = this.COUNTRIES.find(
  (country) => country.name === player.country,
);
this.playerActionsFroms.setValue(player)
this.playerActionsForm.controls.country.setValue(country ? country.name : null);

Retrieving a complete array of countries from the mat-country-select package

Answer №1

Similar questions

Enhance your JavaScript with the addition of keyboard navigation feature

How can I pass the color hex value from the controller to the view without using quotation marks?

JQuery - Real-time computation and transformation within an interactive spreadsheet

The "Key" function from Object.keys does not yield true when compared to an identical string

"Encountering a glitch in the Typescript/Node API where Express routes

Extremely sluggish pagination in JQGrid following the implementation of a filter through the filter toolbar

Comparison between Browser Plugin and JavaScript for Rich Internet Applications

.js script not being rendered within the ng-view

Error: The system encountered an issue while trying to access an undefined property 'find'

Testing Angular components with Jasmine and subscribing to EventEmitters

Tips for retrieving page source with selenium Remote Control

Include a new row in the form that contains textareas using PHP

Koa fails to extract the 'body' from a fetch POST request

How can I retrieve the ngx-Summernote runtime value?

What is the best way to incorporate GASP animation as a background in a React application?

Error: The function addToCart does not exist

Error encountered with MobileFirst version 8 and Angular JS v1.5.3 integration using Bootstrap

Error: a is missing in the Google Maps configuration

Creating a three-row CSS layout where the middle row aligns to the right side

How can we incorporate dynamic HTML elements into a React JS application?