无法找到错误窗体，在呈现后没有响应。

Question

我创造了一种形式，它真的回应了fin，但我不知道我在其中搞了什么。当我单击“提交”或“重置”按钮时，它不会响应。我一行行地仔细研究了这段代码，但什么也没有发现。我试过恢复以前的版本，但无法解决，请帮助我。

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="abc@domain.com" 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();
}
}

Answer 1

分配给reg变量在ngOnInit中的正则表达式有问题。如果删除使用regex的验证器，代码就能工作。

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]]
});
}  

我不完全确定这个正则表达式有什么问题--特别是因为您提供的是字符串，而不是正则表达式。也许，如果你提供这个正则表达式应该做什么，我可以详述这个答案。

请参阅这个工作的StackBlitz，它包含您的代码，其中只有一行注释掉了。