Unable to display validations in angular form Angular 13

Question

the warning is not being displayed for the radio button after submitting the form. But after clicking reset once and submitting the form then the warning is being displayed. please check out this https://streamable.com/oticww also I am unable to impose the min and max length restrictions on the telephone and zip codes. when I try to impose those validations its pushing null error.

component.html

<div class="card m-3">
<div class="card-body">
<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">

    <div class="form-group col-5">
      <label>UserName:</label>
      <input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f['fName'].errors}"/>
      <div *ngIf="submitted && f['fName'].errors" class="invalid-feedback"></div>
      <div *ngIf="submitted && surveyForm.controls['fName'].errors" class="invalid-feedback">first name is required</div>
    </div>
    
    <div class="form-group col-5">
      <label>StudentID:</label>
      <input placeholder="g01333314" id="StudentId" type="text" formControlName="StudentId" class="form-control" [ngClass]="{'is-invalid':submitted && f['StudentId'].errors}"/>
      <div *ngIf="submitted && surveyForm.controls['StudentId'].errors" class="invalid-feedback">Enter a valid student id</div>
    </div>

    <div class="form-group col-5">
      <label>Street Address:</label>
      <input id="StreetAddress" placeholder="4400 university drive" type="text" formControlName="StreetAddress" class="form-control" [ngClass]="{'is-invalid':submitted && f['StreetAddress'].errors}"/>
      <div *ngIf="submitted && surveyForm.controls['StreetAddress'].errors" class="invalid-feedback">Enter a valid Address.</div>
    </div>
    
    <div class="form-group col-5">
      <label>City:</label>
      <input id="City" type="text" placeholder="Fairfax" formControlName="City" class="form-control" [ngClass]="{'is-invalid':submitted && f['City'].errors}"/>
      <div *ngIf="submitted && surveyForm.controls['City'].errors" class="invalid-feedback">Enter a valid city name.</div>
    </div>

    <div class="form-group col-5">
      <label>State:</label>
      <input id="State" type="text" placeholder="VA" formControlName="State" class="form-control" [ngClass]="{'is-invalid':submitted && f['State'].errors}"/>
      <div *ngIf="submitted && surveyForm.controls['State'].errors" class="invalid-feedback">Enter a valid State.</div>
    </div>

    <div class="form-group col-5">
      <label>Zip Code:</label>
      <input id="Zip" type="text" placeholder="22030" formControlName="Zip" class="form-control" [ngClass]="{'is-invalid':submitted && f['Zip'].errors}"/>
      <div *ngIf="submitted && surveyForm.controls['Zip'].errors" class="invalid-feedback">Enter a valid Zip Code.</div>
    </div>

    <div class="form-group col-5">
      <label>Telephone Number:</label>
      <input id="Telephone" type="number" placeholder="7039932000" formControlName="Telephone" class="form-control" [ngClass]="{'is-invalid':submitted && f['Telephone'].errors}"/>
      
      <div *ngIf="submitted && surveyForm.controls['Telephone'].errors" class="invalid-feedback">Enter a valid Telephone number.</div>
    </div>

    <div class="form-group col-5">
      <label>Email:</label>
      <input id="Email" type="email" placeholder="abc@domain.com" formControlName="Email" class="form-control" [ngClass]="{'is-invalid':submitted && f['Email'].errors}"/>
      <div *ngIf="submitted && surveyForm.controls['Email'].errors" class="invalid-feedback">Enter a valid Email.</div>
    </div>

    <div class="form-group col-5">
      <label>URL:</label>
      <input id="Url" type="url" placeholder="https://www.google.com" formControlName="Url" class="form-control" [ngClass]="{'is-invalid':submitted && f['Url'].errors}"/>
      <div *ngIf="submitted && surveyForm.controls['Url'].errors" class="invalid-feedback">Enter a URL</div>
    </div>

    <!--Date will be saved in the format YYYY-MM-DD-->
    <div class="form-row col-5">
      <div class="form-group col">
          <label>Date of Survey</label>
          <input type="date" formControlName="dos" class="form-control" [ngClass]="{ 'is-invalid': submitted && f['dos'].errors }" />
          <div *ngIf="submitted && f['dos'].errors" class="invalid-feedback">Date of survey is required</div>
              
      </div>
    </div>

    <div class="form-group col-5">
      <label>Comments:</label>
      <textarea id="comments" class="col-75" formControlName="comments" [ngClass]="{'is-invalid':submitted && f['Url'].errors}" name="comment" id="comment" rows="3" cols="85" tabindex=" "  placeholder="Please leave your comment here..."></textarea>
      <div *ngIf="submitted && surveyForm.controls['Url'].errors" class="invalid-feedback"></div>
    </div>

    <div class="form-row col-5">
      <label>Would you recommend our school to prospective students?</label>
      <div class="form-row col-5">
        <select id="recommendation" class="form-control" formControlName="recommendation" [ngClass]="{ 'is-invalid': submitted && f['recommendation'].errors }">
          <option value="very likely">Very likely</option>
          <option value="likely">Likely</option>
          <option value="unlikely">Unlikely</option>
        </select>
        <div *ngIf="submitted && f['recommendation'].errors" class="invalid-feedback">This field is mandatory</div>
      </div>  
    </div>

    <div class="form-row col-5">
      <label>How did you become interested in our school?</label><p class="mandatory">*</p>
    </div>
     <div class="form-row col-5"> 
      <div>
        <input type="radio" id="Friends" name="Interest" value="Friends" formControlName="likes" [ngClass]="{ 'is-invalid': submitted && f['likes'].errors }"/>
        <label for="Friends">Friends</label>
      </div>
    
      <div>
        <input type="radio" id="Television" name="Interest" value="Interest" formControlName="likes" [ngClass]="{ 'is-invalid': submitted && f['likes'].errors }"/>
        <label for="Television">Television</label>
      </div>
   
      <div>
        <input type="radio" id="Internet" name="Interest" value="Internet" formControlName="likes" [ngClass]="{ 'is-invalid': submitted && f['likes'].errors }"/>
        <label for="Internet">Internet</label>
      </div>
    
      <div>
        <input type="radio" id="Others" name="Interest" value="Others" formControlName="likes" [ngClass]="{ 'is-invalid': submitted && f['likes'].errors }"/>
        <label for="Others">Others</label>
      <div *ngIf="submitted && f['likes'].errors" class="invalid-feedback">At least one must be selected</div>
      
      </div>
 
      </div> 
    
     <div class="text-center">
      <button type="button" class="btn btn-primary mr-1" 
      (click)="onSubmit()">Submit</button>
      <button type="button" class="btn btn-secondary" 
       (click)="onReset()">Reset</button>
      </div>
       </form>
       </div>
       </div>

Component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators, FormControl, 
AsyncValidatorFn, ValidatorFn} from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

surveyForm!: FormGroup;
submitted= false;

get ordersFormArray(){
return this.surveyForm.controls['orders'] as FormArray;
}

constructor(private  formBuilder: FormBuilder){}

ngOnInit(){

this.surveyForm = this.formBuilder.group({
  fName: ['',[Validators.required, Validators.pattern(/^[a-zA-Z ]{2,30}$/)]],
  StudentId: ['', [Validators.required, Validators.pattern(/^[A-Za-z]{1,1}\d{8,8}$/)]],
  StreetAddress: ['', [Validators.required, Validators.pattern(/^(?:[0-9]+\s[a-zA-Z]|[A-Za-z]+\s[0-9])[a-z0-9\s]*$/)]],
  City: ['', [Validators.required, Validators.minLength(3), Validators.pattern(/^[a-zA-Z]*$/)]],
  State: ['',[Validators.required, Validators.pattern(/(^[a-zA-Z]{2,2})*$/)]],
  Zip: ['',[Validators.required, Validators.minLength(5), Validators.maxLength(5), Validators.pattern(/^[0-9]*$/)]],
  Telephone: ['',[Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern(/^[0-9]{10,10}$/)]],
  Email: ['', [Validators.required, Validators.pattern(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)]],
  Url: [''],
  dos: ['', Validators.required],
  orders: new FormArray([]),
  comments: [],
  recommendation: ['', Validators.required],
  likes: ['', [Validators.required]]
  //Date: ['',[Validators.required]]
});    
}


get f() { return this.surveyForm.controls; }

onSubmit() {
this.submitted = true;

// stop here if form is invalid
if (this.surveyForm.invalid) {
    alert('invalid details');
}
  else
// display form values on success
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.surveyForm.value, null, 4));
}

onReset() {
this.submitted = false;
this.surveyForm.reset();
}
}

try null as a default value for your form `likes: [null, [Validators.required]]` — Andrei, Nov 28 '21 at 18:56

score 0 · Answer 1 · answered Nov 28 '21 at 19:19

0

Change the button type='submit' and remove the (click)

<button type="submit" class="btn btn-primary mr-1" 
     >Submit</button>

since you have already defined onSubmit, you should not trigger the form submit event.

answered Nov 28 '21 at 19:19

vaira

2,191
1
10
15

Thanks for correcting. But still, when submitting the empty form no warning is being shown for radio buttons – Chaitanya Chitturi Nov 28 '21 at 19:32
weird I tried your code on stackBlitz and it was working, even without any edit – vaira Nov 28 '21 at 20:11
That's weird. i will check it again – Chaitanya Chitturi Nov 28 '21 at 20:22

Unable to display validations in angular form Angular 13

1 Answers1