在用户单击“提交”按钮后，我正在进行角度形式验证，我将必需的验证设置为提交时的空白字段，并且还将错误消息显示为“必需”，但在提交表单后将其显示为“必需”。我已经在寻找解决方案，但是没有任何一项工作。
component.html：
<form [formGroup]="companyForm" #formDir="ngForm" >
<!-- company details -->
<ng-container formGroupName="company_details">
<div *ngSwitchCase="'company_details'">
<div fxLayout="row wrap">
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<mat-label>company name</mat-label>
<input matInput formControlName="name">
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<mat-label>display name</mat-label>
<input matInput formControlName= "display_name">
</mat-form-field>
</div>
</div>
</div>
</ng-container>
<ng-container formGroupName="company_settings">
<div *ngSwitchCase="'company_details'">
<div fxLayout="row wrap">
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<mat-label>website</mat-label>
<input matInput formControlName="website">
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<!-- <input matInput placeholder="FISCAL START" value="January 2018"> -->
<mat-label>fiscal start</mat-label>
<mat-select formControlName="fiscal_start">
<mat-option *ngFor="let fl of FiscalList | keyvalue" [value]="fl.key">
{{fl.value}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<mat-label>company contact</mat-label>
<input matInput formControlName="contact_number">
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<mat-label>faxe</mat-label>
<input matInput formControlName="fax">
</mat-form-field>
</div>
<div fxFlex="100">
<h2 class="text-uppercase font-weight-900 font-size-18">Description</h2>
<div fxfill fusePerfectScrollbar>
<quill-editor [style.display]="'inline-block'" [style.height]="'200px'" #description
formControlName="description">
</quill-editor>
</div>
</div>
</div>
</div>
<div *ngSwitchCase="'logos'">
<div class="page-layout simple">
<div class="logo-bg">
<div fxLayout="row wrap" fxFill>
<div fxFlex="50" class="px-24 pb-24 text-center">
<h4 class="font-size-16 text-bold text-center mb-0">Company Logo </h4>
<span class="text-normal">500px X 300px</span>
<div class="file-upload-bg p-12">
<div class="text-center h-160">
<!-- <img src={{logo_path}} style="max-width:100%;height: 130px;"> -->
<img [src]="url" style="max-width:100%;height: auto;">
</div>
<div class="file-upload text-center">
<label for="file"> Choose file </label>
<input type="file" accept="image/*" id="file" formControlName="company_logo"
(change)="onSelectFile($event)">
</div>
</div>
</div>
<div fxFlex="50" class="px-24 pb-24 text-center">
<h4 class="font-size-16 text-bold text-center mb-0">Social Media Logo </h4>
<span class="text-normal">500px X 300px</span>
<div class="file-upload-bg p-12">
<div class="text-center h-160">
<img [src]="url1" style="max-width:100%;height: auto;">
</div>
<div class="file-upload text-center">
<label for="file1"> Choose file </label>
<input type="file" accept="image/*" id="file1" formControlName="social_media_logo_path" (change)="onSelectFile1($event)">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngSwitchCase="'locale_information'">
<div fxLayout="row wrap">
<div fxFlex="50">
<mat-form-field appearance="outline" class="w-80-p">
<mat-label>Currency</mat-label>
<mat-select formControlName="currency">
<mat-option *ngFor="let currency of currencyList | keyvalue" [value]="currency.key">
{{currency.value}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="w-80-p">
<mat-label>Date Format</mat-label>
<mat-select formControlName="date_format">
<mat-option *ngFor="let df of defaultDateFormats | keyvalue" [value]="df.key">
{{df.value}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="w-80-p">
<mat-label>Timezone</mat-label>
<mat-select formControlName="timezone">
<mat-option *ngFor="let tz of timezone_list[userList.country_id]" [value]="tz.id">
{{tz.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="w-80-p">
<mat-label>Time Format</mat-label>
<mat-select formControlName="timeformat">
<mat-option *ngFor="let tf of timeformat | keyvalue" [value]="tf.key">
{{tf.value}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<div *ngSwitchCase="'resume_inbox_config'">
<mat-checkbox formControlName="resume_inbox_non_user" (change)="changeSelect($event)" >
All non users to send resumes
</mat-checkbox>
<br>
<mat-form-field appearance="outline" *ngIf="companyForm.get('company_settings').get('resume_inbox_non_user').value" class="example-full-width w-40-p mt-12">
<mat-label>Candidate Owner</mat-label>
<mat-select formControlName="resume_inbox_contact_owner" multiple>
<mat-option *ngFor="let eachc of candidateList" [value]="eachc">{{eachc.name}}</mat-option>
</mat-select>
<mat-error *ngIf="(companyForm.get('company_settings').get('resume_inbox_non_user').value && companyForm.get('company_settings').get('resume_inbox_contact_owner').errors?.required) ">
Candidate Owner is required
</mat-error>
</mat-form-field>
</div>
</ng-container>
<div *ngSwitchCase="'billing_address'">
<ng-container formGroupName="billing" >
<!-- <form> -->
<div fxLayout="row wrap" class="pl-28">
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<mat-label>street</mat-label>
<input matInput formControlName="street">
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<mat-label>city</mat-label>
<input matInput formControlName="city">
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="w-80-p">
<mat-label>Country</mat-label>
<mat-select formControlName="country">
<mat-option value="">-- Select Country --</mat-option>
<mat-option *ngFor="let country of objectValues(masterdatalist.countriesList)" [value]="country.id">
{{country.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="w-80-p">
<mat-label>State</mat-label>
<mat-select formControlName="state">
<mat-option *ngFor="let state of masterdatalist.countriesStates[companyForm.get('billing').get('country').value]" [value]="state.id">
{{state.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" class="example-full-width w-80-p">
<mat-label>zip</mat-label>
<input matInput formControlName="zip">
</mat-form-field>
</div>
</div>
</ng-container>
</div>
<div *ngSwitchCase="'ip_restrictions'">
<div class="mb-20" fxLayout="row wrap" fxLayoutAlign="start center">
<span class="mr-12">
Applicable to:
</span>
<div *ngFor="let user of companyForm.get('applicable_to').controls; let i = index" >
<mat-checkbox class="mr-32" *ngIf="i === 0" [formControl]="user" [checked]="user.value === 1 ? true : false ">Recruitment Activities</mat-checkbox>
<mat-error *ngIf="(user.touched || user.untouched) && !user.valid">
Required
</mat-error>
<mat-checkbox [formControl]="user" *ngIf="i === 1" [checked]="user.value === 1 ? true : false " (change)="checkRecruitment($event);">HR Management</mat-checkbox>
</div>
</div>
<div formArrayName="company_ip_addresses">
<div *ngFor="let item of companyForm.get('company_ip_addresses').controls; let i=index; let isFirst = first">
<ng-container [formGroupName]="i">
<div fxLayout="row wrap" fxLayoutAlign="space-around center">
<div fxFlex="30">
<mat-form-field appearance="outline" class="example-full-width" class="w-90-p">
<mat-label>start ip</mat-label>
<input matInput formControlName="start_ip" (blur)="checkStartEndIP($event.target.value,i,'start_ip')" >
<mat-error *ngIf="(companyForm.get('company_ip_addresses').at(i).controls.start_ip.touched || companyForm.get('company_ip_addresses').at(i).controls.start_ip.untouched) && companyForm.get('company_ip_addresses').at(i).controls.end_ip.valid && !companyForm.get('company_ip_addresses').at(i).controls.start_ip.value ">
Required Start IP
</mat-error>
<mat-error *ngIf="((companyForm.get('company_ip_addresses').at(i).controls.end_ip.dirty || companyForm.get('company_ip_addresses').at(i).controls.end_ip.touched) && companyForm.get('company_ip_addresses').at(i).controls.start_ip.errors?.pattern)">
Invalid Start IP
</mat-error>
</mat-form-field>
</div>
<div fxFlex="30">
<mat-form-field appearance="outline" class="example-full-width" class="w-90-p">
<mat-label>End Ip</mat-label>
<input matInput formControlName= "end_ip" (blur)="checkStartEndIP($event.target.value,i,'end_ip')">
<mat-error *ngIf="(companyForm.get('company_ip_addresses').at(i).controls.end_ip.touched || companyForm.get('company_ip_addresses').at(i).controls.end_ip.untouched) && companyForm.get('company_ip_addresses').at(i).controls.start_ip.valid && !companyForm.get('company_ip_addresses').at(i).controls.end_ip.value ">
Required End IP
</mat-error>
<mat-error *ngIf="((companyForm.get('company_ip_addresses').at(i).controls.end_ip.dirty || companyForm.get('company_ip_addresses').at(i).controls.end_ip.touched) && companyForm.get('company_ip_addresses').at(i).controls.end_ip.errors?.pattern)">
Invalid End IP
</mat-error>
</mat-form-field>
</div>
<div fxFlex="30">
<div *ngIf="isFirst;then addfield else delete">
</div>
<ng-template #addfield>
<button mat-icon-button class="text-center" (click)="addItem()">
<mat-icon class="font-weight-900">add</mat-icon>
</button>
</ng-template>
<ng-template #delete>
<button mat-icon-button class="text-center" (click)="deletefield(i)">
<mat-icon class="font-weight-900 red-500-fg">delete</mat-icon>
</button>
</ng-template>
</div>
<ng-template #addfield>
<button mat-icon-button class="text-center" (click)="addItem()">
<mat-icon class="font-weight-900">add</mat-icon>
</button>
</ng-template>
<ng-template #delete>
<button mat-icon-button class="text-center" (click)="deletefield(i)">
<mat-icon class="font-weight-900 red-500-fg">delete</mat-icon>
</button>
</ng-template>
</div>
</ng-container>
</div>
</div>
</div>
<ng-container formGroupName="login">
<div *ngSwitchCase="'login'">
<div fxLayout="row wrap">
<div fxFlex="50" fxFlexOffset="25" class="px-48">
<div class="text-center">
<h2 class="font-size-26 text-bold">Hello</h2>
<p class="font-size-14">Please login to your account</p>
</div>
<div>
<mat-form-field appearance="outline" class="w-100-p">
<mat-label>email</mat-label>
<input matInput formControlName="login_email" [errorStateMatcher]="matcher">
<mat-icon matSuffix class="grey-700-fg">email</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline" class="w-100-p">
<mat-label>Password</mat-label>
<input matInput formControlName="login_password" [type]="hide ? 'password' : 'text'">
<mat-icon matSuffix (click)="hide = !hide" class="grey-700-fg cursor-pointer">{{hide ? 'visibility_off'
:'visibility'}}</mat-icon>
</mat-form-field>
<div class="text-right cursor-pointer">
<a>forgot password? </a>
</div>
<div class="text-center mt-12">
<button mat-flat-button color="primary"
class="px-60 py-4 font-size-14 text-bold btn-rounded">Login</button>
</div>
</div>
<div class="mt-60 text-center">
<button mat-flat-button class="font-size-14 text-bold grey-400-bg mr-20 px-12"
(click)="urlDialog()">URL</button>
<button mat-flat-button class="font-size-14 text-bold grey-400-bg" (click)="embedDialog()">Embed
Code</button>
</div>
</div>
</div>
</div>
</ng-container>
</form>
component.ts：
ip_addresses_arr: any;
this.companyForm = this.fb.group({
id: [],
company_details: this.fb.group({
name: [],
display_name: []
}),
company_settings: this.fb.group({
id: [],
website: [],
fiscal_start: [],
contact_number: [],
fax: [],
description: [],
company_logo: [],
social_media_logo_path: [],
logo_path: [],
currency: [],
date_format: [],
timezone: [],
timeformat: [],
resume_inbox_non_user: [],
resume_inbox_contact_owner: [''],
logo: [''],
original_logo: [''],
social_media_logo: ['']
}),
billing: this.fb.group({
id: [],
street: [],
city: [],
country: [],
state: [],
zip: []
}),
company_ip_addresses: this.fb.array([this.fb.group({
id: 0,
created_by: 0,
modified_by: 0,
start_ip: new FormControl('', Validators.pattern("^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$")),
end_ip: new FormControl('', Validators.pattern("^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$"))
})]),
applicable_to: this.buildUserTypes(),
login: this.fb.group({
login_email: [''],
login_password: ['']
}),
});
我提交表单的表单验证为：
saveCompanyInfo() {
this.ip_addresses_arr = this.companyForm.get('company_ip_addresses') as FormArray;
this.ip_addresses_arr.controls.forEach(eachfield => {
console.log("start_ip value - ",eachfield.value['start_ip']);
console.log("end_ip value - ",eachfield.value['end_ip']);
if( eachfield.value['start_ip'] != "" && (eachfield.value['end_ip'] == null || eachfield.value['end_ip'] == "" ) ){
console.log("coming inside end_ip is empty");
eachfield.get('end_ip').setValidators([Validators.required]);
eachfield.get('end_ip').updateValueAndValidity();
eachfield.get('end_ip').markAsTouched();
console.log("eachfield.get('end_ip') after setErrors - ",eachfield.get('end_ip'));
}else if( eachfield.value['end_ip'] != "" && (eachfield.value['start_ip'] == null || eachfield.value['start_ip'] == "" ) ){
console.log("coming inside start_ip is empty");
eachfield.get('start_ip').setValidators([Validators.required]);
eachfield.get('start_ip').updateValueAndValidity();
eachfield.get('start_ip').markAsTouched();
console.log("eachfield.get('start_ip') after setErrors - ",eachfield.get('start_ip'));
}else{
console.log("coming to else");
eachfield.get('start_ip').clearValidators();
eachfield.get('end_ip').clearValidators();
}
});
console.log("this.companyForm.valid - ",this.companyForm.valid);
if (this.companyForm.valid) {
-----------------
-----------------
}
}
我的浏览器控制台是：
eachfield.get('start_ip') after setErrors
FormControl {...}
asyncValidator: null
dirty: (...)
disabled: (...)
enabled: (...)
errors: {required: true}
--------
this.companyForm.valid - true
您可以在上方看到将我的formcontrol设置为“ required：true”，并且将我的 form.valid条件设置为“ true”，并且在单击“提交”按钮后自动提交了表单 。任何帮助，将不胜感激。谢谢。