無法找到錯誤表單渲染后沒有回應-有解無憂

我創建了一個表單，它的回應非常好，但我不知道我在其中搞砸了什么。當我點擊提交或重置按鈕時它沒有回應。我一行一行地徹底檢查了代碼，但一無所獲。我已經嘗試恢復以前的版本，但無法解決，請幫助我。

組件.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>

組件.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();
}
}

uj5u.com熱心網友回復：

事情是不對您的正則運算式，你分配給你的reg你的內部變數ngOnInit。如果您洗掉使用正則運算式的驗證器，您的代碼將起作用。

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，其中包含僅注釋掉該行的代碼。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/366390.html

標籤：html 有角的

上一篇：更改“HTML”標記背景顏色時如何阻止其他類更改顏色

下一篇：無法將元素固定在頁面角落（博主“簡單”模板）