GSA / GSA/sam-ui-elements

sam-checkbox (multi) is not showing the required error message.

Open
#545 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8
Forks
33
Avg merge
2d 51m
Merged PRs (30d)
65

Description

sam-checkbox (multi) is not showing the required error message when we are going to next page.

if I add the same backend config for sam-text or sam-radio, they are showing the required error message.

if we click on the checkbox and uncheck the checkbox, then only it is showing the error message.

```




farCasesTypesModel = [];
public readonly farCasesConfig = {
id: OpportunityFieldNames.FAR_CASES,
label: 'Requirements Strategy',
name: OpportunityFieldNames.FAR_CASES + '-checkbox',
required: false,
hasSelectAll: false,
hint: 'Select at least one checkbox in this section',
errorMessage: undefined,
options: [
{value: 'FAR 7.107-2', label: 'FAR.&.7.107-2 - Intent to consolidate requirements Determination that consolidation is necessary and justified with the publication of the solicitation in Description.', name: 'checkbox-far-7.107.2'},
{value: 'FAR 7.107-3', label: 'FAR.&.7.107-3 - Intent to bundle requirements Determination that bundling is necessary and justified with the publication of the solicitation in Description.', name: 'checkbox-far-7.107.3'},
{value: 'FAR 7.107-4', label: 'FAR.&.7.107-4 - Intent to substantially bundle requirements Include the rationale for substantial bundling as part of the determination for bundling with the publication of the solicitation', name: 'checkbox-far-7.107.4'},
]
};

constructor(private errorService: OpportunityFormErrorService,
private cdr: ChangeDetectorRef,
private formBuilder: FormBuilder,
private oppFormService: OpportunityFormService,
private noticeTypeMapService: OppNoticeTypeMapService,
private timezoneService: OpportunityTimezoneService,
private oppAutoFillService: OppRelatedNoticeAutoFillService,
private dictionaryService: DictionaryService) {
Object.freeze(this.archiveDateConfig);
Object.freeze(this.vendorsCDIvlConfig);
Object.freeze(this.vendorsVIvlConfig);
Object.freeze(this.authorityConfig);
Object.freeze(this.addiReportingConfig);
Object.freeze(this.farCasesConfig);
}

ngOnInit() {
this.loadFarCases();
}

createForm() {
this.generalInfoForm = this.formBuilder.group({
farCasesTypes: null
});
this.cdr.detectChanges();
if (this.viewModel.getSectionStatus(OpportunitySectionNames.GENERAL) === 'updated') {
this.generalInfoForm.get('farCasesTypes').markAsDirty({onlySelf: true});
this.generalInfoForm.get('farCasesTypes').updateValueAndValidity();
}
}

loadFarCases() {
console.log('loading far cases ' + this.oppGeneralInfoViewModel.farCasesTypes + ',' + this.farCasesTypesModel);
if ( this.oppGeneralInfoViewModel.farCasesTypes ) {
this.farCasesTypesModel = this.oppGeneralInfoViewModel.farCasesTypes;
}
}

updateForm() {
this.generalInfoForm.patchValue({
farCasesTypes: this.farCasesTypesModel
}, {
emitEvent: false
});
console.log('patching ' + this.farCasesTypesModel + ',' + this.addiReportingTypes);
this.cdr.detectChanges();
this.updateErrors();
}

subscribeToChanges() {
this.linkControlTo(this.generalInfoForm.get('farCasesTypes'), this.saveFarCasesTypes);
}

private saveFarCasesTypes(farCases) {
console.log('saving farcases ' + farCases);
this.oppGeneralInfoViewModel.farCasesTypes = farCases;
this.cdr.detectChanges();
this.updateFarCasesError();
}

public updateErrors() {
console.log('updating errors ' + this.farCasesTypesModel + ',' + this.addiReportingTypes);
this.updateFarCasesError();
this.cdr.detectChanges();
}

private updateFarCasesError() {
console.log('updating far cases error ' + this.errorService.validateFarCases().errors?.id);
this.generalInfoForm.get('farCasesTypes').clearValidators();
this.generalInfoForm.get('farCasesTypes').setValidators((control) => {
return control.errors
});
this.generalInfoForm.get('farCasesTypes').setErrors(this.errorService.validateFarCases().errors);
this.markAndUpdateFieldStat('farCasesTypes');
this.emitErrorEvent();
}

shouldShowFarCases() {
return ( environment.SHOW_REQUIREMENTS_STRATEGY === 'true' && this.viewModel.oppHeaderInfoViewModel.opportunityType === 'i' );
}

error-service
public validateFarCases(): OppFieldError {
let fieldErrors = {
id: OpportunityFieldNames.FAR_CASES,
errors: null,
};


if (this._viewModel.data.type && this._viewModel.data.type === 'i') {
if (!this._viewModel.oppGeneralInfoViewModel.farCasesTypes || !this._viewModel.oppGeneralInfoViewModel.farCasesTypes.length) {
fieldErrors.errors = this.validateRequired('Requirements Strategy', this._viewModel.oppGeneralInfoViewModel.farCasesTypes);
}
}

let sectionErrors = OpportunityFormErrorService.findErrorById(this._errors, OpportunitySectionNames.GENERAL) as OppFieldErrorList;
this.setOrUpdateError(sectionErrors, fieldErrors);
console.log('fieldErrors ' + fieldErrors.id + ',' + fieldErrors?.errors?.requiredField?.message);
return fieldErrors;
}

```

![text-radio-showing-the-error1](https://user-images.githubusercontent.com/113618738/192387031-ddc0471a-129a-4b12-9681-e0df3eb7a971.PNG)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.