我想使用反应式表单方法对我的动态选项卡表单进行验证

Question

我有一个包含六个选项卡的表单。我想在每个选项卡上单独验证。假设我在选项卡 1 上，那么它应该只验证选项卡 1 数据字段。然后如果我切换到选项卡 2，那么选项卡 1 数据字段验证应该消失，它应该只显示选项卡 2 验证。注意 - 我的表单中也有一些公共字段。假设所有标签中都有名字。

HTML File

<div class="add-person-list-page">
<h2 class="text-muted">Add Persons</h2>
<hr>
<form [formGroup]="addPerson" (ngSubmit)="onSubmit()">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 mt-3">
            <div class="card">
                <div class="card-body switch-field">
                    <small class="form-text text-muted mb-3">Select role to show minimum mandatory fields.</small>
                    <input class="form-check-input" type="radio" name="personRoleType"
                        (change)="onChangeRole(roleType)" [(ngModel)]="roleType" [value]="1"
                        formControlName="personRoleType">
                    <label class="form-check-label">Pax</label>
                    <input class="form-check-input" type="radio" name="personRoleType"
                        (change)="onChangeRole(roleType)" [(ngModel)]="roleType" [value]="2"
                        formControlName="personRoleType">
                    <label class="form-check-label">Pilot</label>
                    <input class="form-check-input" type="radio" name="personRoleType"
                        (change)="onChangeRole(roleType)" [(ngModel)]="roleType" [value]="3"
                        formControlName="personRoleType">
                    <label class="form-check-label">Crew</label>
                    <input class="form-check-input" type="radio" name="personRoleType"
                        (change)="onChangeRole(roleType)" [(ngModel)]="roleType" [value]="4"
                        formControlName="personRoleType">
                    <label class="form-check-label">Emerg</label>
                    <input class="form-check-input" type="radio" name="personRoleType"
                        (change)="onChangeRole(roleType)" [(ngModel)]="roleType" [value]="5"
                        formControlName="personRoleType">
                    <label class="form-check-label">Op/Ow</label>
                    <input class="form-check-input" type="radio" name="personRoleType"
                        (change)="onChangeRole(roleType)" [(ngModel)]="roleType" [value]="6"
                        formControlName="personRoleType">
                    <label class="form-check-label">Any</label>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 mt-3">
            <div class="card">
                <div class="card-header">
                    GENERAL
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>First Name</label>
                        <input type="text" class="form-control" placeholder="Enter First Name"
                            formControlName="firstName"
                            [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }">
                        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                            <div *ngIf="f.firstName.errors.required">First Name is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType !== 5">
                        <label>Middle Name</label>
                        <input type="text" class="form-control" placeholder="Enter Middle Name"
                            formControlName="middleName"
                            [ngClass]="{ 'is-invalid': submitted && f.middleName.errors }">
                        <div *ngIf="submitted && f.middleName.errors" class="invalid-feedback">
                            <div *ngIf="f.middleName.errors.required">Middle Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Last Name</label>
                        <input type="text" class="form-control" placeholder="Enter Last Name"
                            formControlName="lastName" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }">
                        <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                            <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                        </div>
                    </div>
                    <div class="card-body switch-field text-center" *ngIf="roleType !== 4 && roleType !== 5">
                        <input class="form-check-input" type="radio" formControlName="gender" name="gender"
                            value="male">
                        <label class="form-check-label gender"><i class="fa fa-male" aria-hidden="true"></i></label>
                        <input class="form-check-input" type="radio" formControlName="gender" name="gender"
                            value="female">
                        <label class="form-check-label gender"><i class="fa fa-female"
                                aria-hidden="true"></i></label>
                        <div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
                            <div *ngIf="f.gender.errors.required">Gender is required</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 mt-3" *ngIf="roleType !== 4 && roleType !== 5">
            <div class="card">
                <div class="card-header">
                    BIRTH DETAILS
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Birth Date</label>
                        <input type="text" class="form-control" placeholder="Select Birth Date" bsDatepicker
                            formControlName="birthDate"
                            [ngClass]="{ 'is-invalid': submitted && f.birthDate.errors }">
                        <div *ngIf="submitted && f.birthDate.errors" class="invalid-feedback">
                            <div *ngIf="f.birthDate.errors.required">Birth Date is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType === 6">
                        <label>Birth City</label>
                        <input type="text" class="form-control" placeholder="Enter Birth City"
                            formControlName="birthCity"
                            [ngClass]="{ 'is-invalid': submitted && f.birthCity.errors }">
                        <div *ngIf="submitted && f.birthCity.errors" class="invalid-feedback">
                            <div *ngIf="f.birthCity.errors.required">Birth City is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType === 6">
                        <label>Birth State</label>
                        <input type="text" class="form-control" placeholder="Enter Birth State"
                            formControlName="birthState"
                            [ngClass]="{ 'is-invalid': submitted && f.birthState.errors }">
                        <div *ngIf="submitted && f.birthState.errors" class="invalid-feedback">
                            <div *ngIf="f.birthState.errors.required">Birth State is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType === 6">
                        <label>Birth Country</label>
                        <select class="form-control" formControlName="birthCountry"
                            [ngClass]="{ 'is-invalid': submitted && f.birthCountry.errors }">
                            <option value="">Select Birth Country</option>
                            <option *ngFor="let country of countryArray" value="{{country.id}}">{{country.name}}
                            </option>
                        </select>
                        <div *ngIf="submitted && f.birthCountry.errors" class="invalid-feedback">
                            <div *ngIf="f.birthCountry.errors.required">Birth Country is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Residence</label>
                        <select class="form-control" formControlName="birthResidence"
                            [ngClass]="{ 'is-invalid': submitted && f.birthResidence.errors }">
                            <option value="">Select Residence Country</option>
                            <option *ngFor="let country of countryArray" value="{{country.id}}">{{country.name}}
                            </option>
                        </select>
                        <div *ngIf="submitted && f.birthResidence.errors" class="invalid-feedback">
                            <div *ngIf="f.birthResidence.errors.required">Residence Country is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Citizenship</label>
                        <select class="form-control" formControlName="birthCitizenship"
                            [ngClass]="{ 'is-invalid': submitted && f.birthCitizenship.errors }">
                            <option value="">Select Citizenship Country</option>
                            <option *ngFor="let country of countryArray" value="{{country.id}}">{{country.name}}
                            </option>
                        </select>
                        <div *ngIf="submitted && f.birthCitizenship.errors" class="invalid-feedback">
                            <div *ngIf="f.birthCitizenship.errors.required">Select Citizenship is required</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 mt-3" *ngIf="roleType !== 1">
            <div class="card">
                <div class="card-header">
                    PERMANENT ADDRESS
                </div>
                <div class="card-body">
                    <div class="form-group" *ngIf="roleType !== 4">
                        <label>Street</label>
                        <input type="text" class="form-control" placeholder="Enter Street Address"
                            formControlName="paStreet" [ngClass]="{ 'is-invalid': submitted && f.paStreet.errors }">
                        <div *ngIf="submitted && f.paStreet.errors" class="invalid-feedback">
                            <div *ngIf="f.paStreet.errors.required">Street Address is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType !== 4">
                        <label>City</label>
                        <input type="text" class="form-control" placeholder="Enter City" formControlName="paCity"
                            [ngClass]="{ 'is-invalid': submitted && f.paCity.errors }">
                        <div *ngIf="submitted && f.paCity.errors" class="invalid-feedback">
                            <div *ngIf="f.paCity.errors.required">City is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType !== 4 && roleType !== 5">
                        <label>State</label>
                        <input type="text" class="form-control" placeholder="Enter State" formControlName="paState"
                            [ngClass]="{ 'is-invalid': submitted && f.paState.errors }">
                        <div *ngIf="submitted && f.paState.errors" class="invalid-feedback">
                            <div *ngIf="f.paState.errors.required">State is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType !== 4 && roleType !== 5">
                        <label>Postal Code</label>
                        <input type="text" class="form-control" placeholder="Enter Postal Code"
                            formControlName="paPostalCode"
                            [ngClass]="{ 'is-invalid': submitted && f.paPostalCode.errors }">
                        <div *ngIf="submitted && f.paPostalCode.errors" class="invalid-feedback">
                            <div *ngIf="f.paPostalCode.errors.required">Postal Code is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType !== 4 && roleType !== 5">
                        <label>Country</label>
                        <select class="form-control" formControlName="paCountry"
                            [ngClass]="{ 'is-invalid': submitted && f.paCountry.errors }">
                            <option value="">Select Country</option>
                            <option *ngFor="let country of countryArray" value="{{country.id}}">{{country.name}}
                            </option>
                        </select>
                        <div *ngIf="submitted && f.paCountry.errors" class="invalid-feedback">
                            <div *ngIf="f.paCountry.errors.required">Country is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType !== 1 && roleType !== 3">
                        <label>Phone</label>
                        <input type="text" class="form-control" placeholder="Enter Phone Number"
                            formControlName="paPhone" [ngClass]="{ 'is-invalid': submitted && f.paPhone.errors }">
                        <div *ngIf="submitted && f.paPhone.errors" class="invalid-feedback">
                            <div *ngIf="f.paPhone.errors.required">Phone Number is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType === 6 && roleType !== 5">
                        <label>Fax</label>
                        <input type="text" class="form-control" placeholder="Enter Fax Number"
                            formControlName="paFax" [ngClass]="{ 'is-invalid': submitted && f.paFax.errors }">
                        <div *ngIf="submitted && f.paFax.errors" class="invalid-feedback">
                            <div *ngIf="f.paFax.errors.required">Fax Number is required</div>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="roleType !== 4">
                        <label>Email</label>
                        <input type="email" class="form-control" placeholder="Enter Email" formControlName="paEmail"
                            [ngClass]="{ 'is-invalid': submitted && f.paEmail.errors }">
                        <div *ngIf="submitted && f.paEmail.errors" class="invalid-feedback">
                            <div *ngIf="f.paEmail.errors.required">Email is required</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 mt-3" *ngIf="roleType !== 4 && roleType !== 5">
            <div class="card">
                <div class="card-header">
                    PRIMARY DOCUMENT
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Document</label>
                        <select class="form-control" formControlName="primaryDocument"
                            [ngClass]="{ 'is-invalid': submitted && f.primaryDocument.errors }">
                            <option value="">Select Document</option>
                            <option value="1">1</option>
                        </select>
                        <div *ngIf="submitted && f.primaryDocument.errors" class="invalid-feedback">
                            <div *ngIf="f.primaryDocument.errors.required">Document is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Number</label>
                        <input type="text" class="form-control" placeholder="ID Number"
                            formControlName="primaryDocumentNumber"
                            [ngClass]="{ 'is-invalid': submitted && f.primaryDocumentNumber.errors }">
                        <div *ngIf="submitted && f.primaryDocumentNumber.errors" class="invalid-feedback">
                            <div *ngIf="f.primaryDocumentNumber.errors.required">ID Number is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Issued by</label>
                        <select class="form-control" formControlName="primaryDocumentIssuedBy"
                            [ngClass]="{ 'is-invalid': submitted && f.primaryDocumentIssuedBy.errors }">
                            <option value="">Select Country</option>
                            <option *ngFor="let country of countryArray" value="{{country.id}}">{{country.name}}
                            </option>
                        </select>
                        <div *ngIf="submitted && f.primaryDocumentIssuedBy.errors" class="invalid-feedback">
                            <div *ngIf="f.primaryDocumentIssuedBy.errors.required">Country is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Expiration</label>
                        <input type="text" class="form-control" placeholder="Select Expiration Date" bsDatepicker
                            formControlName="primaryDocumentExp"
                            [ngClass]="{ 'is-invalid': submitted && f.primaryDocumentExp.errors }">
                        <div *ngIf="submitted && f.primaryDocumentExp.errors" class="invalid-feedback">
                            <div *ngIf="f.primaryDocumentExp.errors.required">Expiration Date is required</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 mt-3" *ngIf="roleType === 6">
            <div class="card">
                <div class="card-header">
                    SECONDARY DOCUMENT
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Document</label>
                        <select class="form-control" formControlName="secondaryDocument"
                            [ngClass]="{ 'is-invalid': submitted && f.secondaryDocument.errors }">
                            <option value="">Select Document</option>
                            <option value="1">1</option>
                        </select>
                        <div *ngIf="submitted && f.secondaryDocument.errors" class="invalid-feedback">
                            <div *ngIf="f.secondaryDocument.errors.required">Document is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Number</label>
                        <input type="text" class="form-control" placeholder="ID Number"
                            formControlName="secondaryDocumentNumber"
                            [ngClass]="{ 'is-invalid': submitted && f.secondaryDocumentNumber.errors }">
                        <div *ngIf="submitted && f.secondaryDocumentNumber.errors" class="invalid-feedback">
                            <div *ngIf="f.secondaryDocumentNumber.errors.required">ID Number is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Issued by</label>
                        <select class="form-control" formControlName="secondaryDocumentIssuedBy"
                            [ngClass]="{ 'is-invalid': submitted && f.secondaryDocumentIssuedBy.errors }">
                            <option value="">Select Country</option>
                            <option *ngFor="let country of countryArray" value="{{country.id}}">{{country.name}}
                            </option>
                        </select>
                        <div *ngIf="submitted && f.secondaryDocumentIssuedBy.errors" class="invalid-feedback">
                            <div *ngIf="f.secondaryDocumentIssuedBy.errors.required">Country is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Expiration</label>
                        <input type="text" class="form-control" placeholder="Select Expiration Date" bsDatepicker
                            formControlName="secondaryDocumentExp"
                            [ngClass]="{ 'is-invalid': submitted && f.secondaryDocumentExp.errors }">
                        <div *ngIf="submitted && f.secondaryDocumentExp.errors" class="invalid-feedback">
                            <div *ngIf="f.secondaryDocumentExp.errors.required">Expiration Date is required</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 mt-3" *ngIf="roleType === 2">
            <div class="card">
                <div class="card-header">
                    PILOT'S LICENSE
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Document</label>
                        <select class="form-control" formControlName="pilotDocument"
                            [ngClass]="{ 'is-invalid': submitted && f.pilotDocument.errors }">
                            <option value="1">Pilot's License</option>
                        </select>
                        <div *ngIf="submitted && f.pilotDocument.errors" class="invalid-feedback">
                            <div *ngIf="f.pilotDocument.errors.required">Document is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Number</label>
                        <input type="text" class="form-control" placeholder="ID Number"
                            formControlName="pilotDocumentNumber"
                            [ngClass]="{ 'is-invalid': submitted && f.pilotDocumentNumber.errors }">
                        <div *ngIf="submitted && f.pilotDocumentNumber.errors" class="invalid-feedback">
                            <div *ngIf="f.pilotDocumentNumber.errors.required">ID Number is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Issued by</label>
                        <select class="form-control" formControlName="pilotDocumentIssuedBy"
                            [ngClass]="{ 'is-invalid': submitted && f.pilotDocumentIssuedBy.errors }">
                            <option value="">Select Country</option>
                            <option *ngFor="let country of countryArray" value="{{country.id}}">{{country.name}}
                            </option>
                        </select>
                        <div *ngIf="submitted && f.pilotDocumentIssuedBy.errors" class="invalid-feedback">
                            <div *ngIf="f.pilotDocumentIssuedBy.errors.required">Country is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Expiration</label>
                        <input type="text" class="form-control" placeholder="Select Expiration Date" bsDatepicker
                            formControlName="pilotDocumentExp"
                            [ngClass]="{ 'is-invalid': submitted && f.pilotDocumentExp.errors }">
                        <div *ngIf="submitted && f.pilotDocumentExp.errors" class="invalid-feedback">
                            <div *ngIf="f.pilotDocumentExp.errors.required">Expiration Date is required</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-12">
            <button class="btn btn-md btn-primary" type="submit"> Add Person</button>
            <button class="btn btn-md btn-primary float-right" type="button"> Cancel</button>
        </div>
    </div>
</form>

ts file

export class addPersonComponent implements OnInit {
roleType: number = 1;
addPerson: FormGroup;
submitted = false;
countryArray = [];
Ispax: boolean = false;

constructor(private formBuilder: FormBuilder, private router: Router, private flashPassService: FlashpassService, protected loadingService: LoadingService) {
}

ngOnInit() {
    this.initForm();
    this.getListofCountry();
}

initForm() {
    this.addPerson = this.formBuilder.group({

        personRoleType: ['1'],
        firstName: [''],
        lastName: [''],
        middleName: [''],
        gender: [''],
        birthDate: [''],
        birthCity: [''],
        birthState: [''],
        birthCountry: [''],
        birthResidence: [''],
        birthCitizenship: [''],
        paStreet: [''],
        paCity: [''],
        paState: [''],
        paPostalCode: [''],
        paCountry: [''],
        paPhone: [''],
        paFax: [''],
        paEmail: [''],
        primaryDocument: [''],
        primaryDocumentNumber: [''],
        primaryDocumentIssuedBy: [''],
        primaryDocumentExp: [''],
        secondaryDocument: [''],
        secondaryDocumentNumber: [''],
        secondaryDocumentIssuedBy: [''],
        secondaryDocumentExp: [''],
        pilotDocument: [''],
        pilotDocumentNumber: [''],
        pilotDocumentIssuedBy: [''],
        pilotDocumentExp: [''],
    });
}

// initialize form instance.
get f() { return this.addPerson.controls; }

// Signup form submit function.
onSubmit() {
    this.submitted = true;
    if (this.addPerson.invalid) {
        return;
    }
    // this.router.navigate(['/companies']);
}

getListofCountry() {
    this.loadingService.startLoading();
    this.flashPassService.getCountryList().subscribe(data => {
        this.countryArray = Object.assign([], data);
        this.loadingService.endLoading();
    });
}

onChangeRole(type) {

}

Answer 1

您可以在标签更改事件中使用 this.f.<yourFormControlName>.setValidators([yourValidator]) 方法。手动为您的表单字段设置验证，或者您也可以设置自定义错误 this.f.<yourFormControlName>.setErrors({yourCustomError});

我想使用反应式表单方法对我的动态选项卡表单进行验证

I want to make validations into my dynamic tabs form using reactive form approach

validation

tabs

angular

angular-reactive-forms

angular8