Unable to find the error form is not responding after being rendered-CodePudding

I have created a form Which responded really fin but I don't know what things I have messed in it. it is not responding when I click on submit or reset buttons. I have gone through the code line by line thoroughly but found nothing. I have tried restoring the previous versions but was unable to solve it please help me.

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="form-control">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="form-control">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="form-control">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="form-control">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="form-control">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="form-control">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="form-control">Enter a valid Telephone number.</div>
  </div>

  <div class="form-group col-5">
    <label>Email:</label>
    <input id="Email" type="email" placeholder="[email protected]" formControlName="Email" class="form-control" [ngClass]="{'is-invalid':submitted && f['Email'].errors}"/>
    <div *ngIf="submitted && surveyForm.controls['Email'].errors" class="form-control">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="form-control">Enter a URL</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 { FormControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
surveyForm!: FormGroup;
submitted= false;

constructor(private  formBuilder: FormBuilder){}

ngOnInit(){
const reg = '(https?://)?([\\da-z.-] )\\(.|:)([a-z.]{2,6})[/\\w .-@$#%&]*/?';
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]*$/)]],
  Email: ['', [Validators.required, Validators.pattern(/^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w{2,3}) $/)]],
  Url: ['',[Validators.required, Validators.pattern(reg)]]
  //Date: ['',[Validators.required]]
});
}  
//name = new FormControl('');
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();
}
}

CodePudding user response：

Something is wrong with your regex that you assign to your reg variable inside your ngOnInit. Your code works if you delete the validator that regex is used in.

ngOnInit(){
  const reg = '(https?://)?([\\da-z.-] )\\(.|:)([a-z.]{2,6})[/\\w .-@$#%&]*/?';
  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]*$/)]],
    Email: ['', [Validators.required, Validators.pattern(/^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w{2,3}) $/)]],

    // This enclosed part of the line leads to your problem
    // ----------------------------vvvvvvvvvvvvvvvvvvvvvvv---------------------    
    Url: ['',[Validators.required, Validators.pattern(reg)]]
    // ----------------------------^^^^^^^^^^^^^^^^^^^^^^^---------------------


    //Date: ['',[Validators.required]]
});
}

I'm not entirely sure on what is wrong with that regex - especially since you provide it as a string, not a regex. Maybe if you provide what that regex should do I can expand on this answer.

See this working StackBlitz, which contains your code with only that single line commented out.