'Angular 8 - Reactive form: Select male option from dropdown and return me null
https://imgur.com/a/JqIdl15 picture console log
I believe I did everything right but I do not understand why the option returns me NULL I choose a man or a woman and it returns me NULL It could be that I used npm of TextMaskModule IN THE PHONE INPUT? Or could it be because of some material I added that it destroys the action?
HTML
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Multi Step Form | CodingNepal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<header>Signup Form</header>
<!-- form start -->
<form id="Login" (ngSubmit)="onSubmit()" [formGroup]="signupForm" >
<mat-horizontal-stepper [labelPosition]="'bottom'">
<mat-step errorMessage="Error!" [stepControl]="signupForm" label="Name" >
<!---maybe we can just change the font to red and the icon this is one option-->
<!-- <ng-template matStepLabel>
<p>Name</p>
</ng-template> -->
<div>
<div class="title">Basic Info:</div>
<div class="field">
<div class="label">First Name <span style="color: red;">*</span></div>
<input formControlName="firstName" type="text" >
<div *ngIf="!signupForm.controls.firstName!.valid && (signupForm.controls.firstName!.dirty || signupForm.controls.firstName?.touched)"
style="color: red"> It must contain at least One lowercase | uppercase alphabetical character
</div>
</div>
<div class="field">
<div class="label">Last Name <span style="color: red;">*</span></div>
<input formControlName="lastName" type="text" >
<div *ngIf="!signupForm.controls.lastName!.valid && (signupForm.controls.lastName!.dirty || signupForm.controls.lastName?.touched)"
style="color: red"> It must contain at least One lowercase | uppercase alphabetical character
</div>
</div>
<div class="field">
<button class="firstNext next" matStepperNext>Next</button>
</div>
</div>
</mat-step>
<mat-step state="iconContact" errorMessage="Error!" [stepControl]="signupForm" label="Contact Info:">
<div class="title">Contact Info:</div>
<div class="field">
<div class="label">Email Address <span style="color: red;">*</span></div>
<input formControlName="email" type="email">
<div *ngIf="!signupForm.controls.email!.valid && (signupForm.controls.email!.dirty || signupForm.controls.email?.touched)"
style="color: red"> Invalid email
</div>
</div>
<div class="field">
<div class="label" >Phone Number <span style="color: red;">*</span></div>
<input id="phone" formControlName="phone" type="text" [textMask]="{mask:mask}" placeholder="_ _ _-_ _ _-_ _ _ _" >
<div *ngIf="!signupForm.controls.phone!.valid && (signupForm.controls.phone!.dirty || signupForm.controls.phone?.touched)"
style="color: red"> Invalid phone
</div>
</div>
<div class="field">
<div class="label">Address <span style="color: red;">*</span></div>
<input formControlName="address" type="text" >
<div *ngIf="!signupForm.controls.address!.valid && (signupForm.controls.address!.dirty || signupForm.controls.address?.touched)"
style="color: red"> Address is required
</div>
</div>
<div class="field">
<div class="label">City <span style="color: red;">*</span></div>
<input formControlName="city" type="text" >
<div *ngIf="!signupForm.controls.city!.valid && (signupForm.controls.city!.dirty || signupForm.controls.city?.touched)"
style="color: red"> City is required
</div>
</div>
<div class="field">
<div class="label">Country <span style="color: red;">*</span></div>
<input formControlName="country" type="text" >
<div *ngIf="!signupForm.controls.country!.valid && (signupForm.controls.country!.dirty || signupForm.controls.country?.touched)"
style="color: red"> country is required
</div>
</div>
<div class="field btns"> <br>
<button class="prev-1 prev" matStepperPrevious>Previous</button>
<button class="next-1 next" matStepperNext>Next</button>
</div>
</mat-step>
<mat-step state="iconBirth" label="Birth" errorMessage="Error!" [stepControl]="signupForm">
<div class="title">Date of Birth:</div>
<div class="field">
<div class="label">Date</div>
<input formControlName="date" type="date" >
<div *ngIf="!signupForm.controls.date!.valid && (signupForm.controls.date!.dirty || signupForm.controls.date?.touched)"
style="color: red"> Date is required
</div>
</div>
<div class="field">
<div class="label">Gender <span style="color: red;">*</span></div> <br>
<select formControlName="gender">
<option value="male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div *ngIf="!signupForm.controls.gender!.valid && (signupForm.controls.gender!.dirty || signupForm.controls.gender?.touched)"
style="color: red"> Date is required
</div>
</div>
<div class="field btns"> <br> <br> <br><br>
<button class="prev-1 prev" matStepperPrevious>Previous</button>
<button class="next-1 next" matStepperNext>Next</button>
</div>
</mat-step>
<mat-step state="iconSubmit" label="Submit">
<div class="title">Login Details:</div>
<div class="field">
<div class="label">Username <span style="color: red;">*</span></div>
<input formControlName="userName" type="text">
<div *ngIf="!signupForm.controls.userName!.valid && (signupForm.controls.userName!.dirty || signupForm.controls.userName?.touched)"
style="color: red"> Invalid is required
</div>
</div>
<div class="field">
<div class="label">Password <span style="color: red;">*</span></div>
<input formControlName="password" type="password" >
<div *ngIf="!signupForm.controls.password!.valid && (signupForm.controls.password!.dirty || signupForm.controls.password?.touched)"
style="color: red">
<li>It must not contain any whitespace.</li> <br>
<li>It must contain at least one uppercase, one lowercase and one numeric character.</li> <br>
<li>It must contain at least one special character. [!@#$]</li>
</div>
</div>
<div class="field btns"> <br>
<button class="prev-1 prev" matStepperPrevious>Previous</button>
<button type="submit" class="next-1 next" [disabled]="!signupForm.valid" matStepperNext>Submit</button>
</div>
</mat-step>
<!-- Change Icons-->
<ng-template matStepperIcon="iconContact">
<i class="fas fa-address-book"></i>
</ng-template>
<ng-template matStepperIcon="iconBirth">
<i class="fas fa-calendar-alt"></i>
</ng-template>
<ng-template matStepperIcon="iconSubmit">
<i class="far fa-check-circle"></i>
</ng-template>
</mat-horizontal-stepper>
</form>
<!-- form end -->
</div>
</body>
</html>
TypeScript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css'],
providers:[
{
provide:STEPPER_GLOBAL_OPTIONS,
useValue: {
showError:true,
displayDefaultIndicatorType: false
}
}
]
})
export class SignupComponent implements OnInit {
signupForm: FormGroup;
completed = false;
constructor() { }
ngOnInit(): void {
this.createLoginForm();
}
createLoginForm(){
this.signupForm = new FormGroup({
firstName: new FormControl('',[Validators.required , Validators.pattern('^[A-Z|a-z| ]+$')]),
lastName: new FormControl('',[Validators.required , Validators.pattern('^[A-Z|a-z| ]+$')]),
email: new FormControl('',[Validators.required , Validators.email]),
phone: new FormControl('',[Validators.required]),
date: new FormControl('',[Validators.required]),
address: new FormControl('',[Validators.required, Validators.pattern('^[A-Z|a-z| |0-9]+$')]),
userName: new FormControl('',[Validators.required]),
password: new FormControl('',[Validators.required]),
gender: new FormControl('',[Validators.required]),
city: new FormControl('',[Validators.required, Validators.pattern('^[A-Z|a-z| ]+$')]),
country: new FormControl('',[Validators.required, Validators.pattern('^[A-Z|a-z| ]+$')]),
})
}
onSubmit(){
console.log(this.signupForm.value);
}
public mask= [/[0-9]/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
}
Solution 1:[1]
I got it running on this stackblitz: https://stackblitz.com/edit/angular-ivy-drrgsu?file=src%2Fapp%2Fsignup.component.html
though is super ugly since there is no styling. Gender is printed in the console as expected. Only change I made was to remove the mask to run, because I didn't install that dependency.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |