As a newcomer to Angular, I'm seeking guidance on how to properly handle form submissions with NgSelect in my project.
Within my new-team.component.html file, I have the following code structure:
<app-header></app-header>
<div class="container">
<div class="row m-5">
<div class="col">
<div class="card">
<div class="card-header">
New team creation
</div>
<div class="card-body">
<form #formNewTeam="ngForm" (ngSubmit)="onSubmitNewTeam(formNewTeam)">
<div class="mb-3">
<label for="teamName" class="form-label">Team Name</label>
<input type="text" class="form-control" id="teamName" placeholder="Team name" ngModel #teamName="ngModel"
name="teamName" required minlength="6" pattern="^[a-zA-Z0-9À-ú.-]{6,}">
<div *ngIf="teamName.errors && formNewTeam.submitted" class="text-danger">
<div *ngIf="teamName.errors['required']">Team Name is required</div>
<div *ngIf="teamName.errors['pattern']">
Your team name must be at least 6 characters long and without special characters except -
</div>
</div>
</div>
<div class="mb-3">
<ng-select [items]="countries" bindLabel="frenchName" bindValue="id" placeholder="Select a country for your team">
<ng-template ng-label-tmp let-item="item">
<b>{{item.frenchName}}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<img height="18" width="25" [src]="item.logo" />
<b style="margin-left: 10px">{{item.frenchName}}</b>
</ng-template>
</ng-select>
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
</div>
</div>
</div>
</div>
</div>
Additionally, here is a snippet from my component file:
import { Component, OnDestroy, OnInit } from '@angular/core';
import { NgForm } from "@angular/forms";
import { Subscription } from "rxjs";
import { Country } from 'src/app/_models/country.model';
import { CountryService } from 'src/app/_services/country.service';
import { User } from "../../_models/user.model";
import { AuthService } from "../../_services/auth.service";
// Component definition and implementation
As I perform the console.log(formNewTeam); operation in my TypeScript file, I am only able to access the value of the input field, not the selection made within the <ng-select>. How can I effectively capture and transmit both values (input field value + <ng-select> value) to my backend API?
For context, the Country object comprises the attributes: id, frenchName, and logo.
Ultimately, I aim to receive the form data with the following format, for instance: teamName = "Real Madrid" and countryId = "10"
Your insights in resolving this matter are highly appreciated. Thank you.