0

提交表单后，单选按钮未显示警告。但是在单击一次重置并提交表单后，将显示警告。请查看此https://streamable.com/oticww我也无法对电话和邮政编码施加最小和最大长度限制。当我尝试强加这些验证时，它的推送 null 错误。

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

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

1 回答 1

0

更改按钮type='submit'并删除（单击）

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

因为你已经定义了 onSubmit，所以你不应该触发表单提交事件。

于 2021-11-28T19:19:19.927 回答