提交表单后，单选按钮未显示警告。但是在单击一次重置并提交表单后，将显示警告。请查看此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();
}
}