GSA/sam-ui-elements

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

ViswanathYerramsetty opened this issue · 0 comments

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.

<div class="sam-ui segment" [hidden]="!checkFieldDisplayOption('FAR_CASES')" *ngIf="shouldShowFarCases()">
    <sam-checkbox
      [attr.id]="farCasesConfig.id"
      [(model)]="farCasesTypesModel"
      [name]="farCasesConfig.name"
      [options]="farCasesConfig.options"
      [label]="farCasesConfig.label"
      [hint]="farCasesConfig.hint"
      [control]="generalInfoForm.controls['farCasesTypes']"
      [formControl]="generalInfoForm.controls['farCasesTypes']"
      [required]="true">
    </sam-checkbox>
</div>


  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