Validation for shared component

user_10928596 0
Viewed 377

I'm trying to make a shared component for file upload to reuse it whenever needed. If I place my file upload code in same html of the form, the validation works. If i make that as separate component the validation isn't working.

Note: I want to use validation for file in some components and don't want to validation in other components

Here is working stackblitz of the code which I have tried

<form [formGroup]="formLocation" (ngSubmit)="onSubmitFarmLocation()">
    <div class="form-row">
        <div class="form-group col-sm-4">
            <label>Property Identification Number</label>
            <input class="form-control" type="text" formControlName="propertyIdentificationNumber"
                            [class.invalid]="!formLocation.controls['propertyIdentificationNumber'].valid && formLocation.controls['propertyIdentificationNumber'].touched " >
            <div
                *ngIf="!formLocation.controls['propertyIdentificationNumber'].valid && (formLocation.controls['propertyIdentificationNumber'].touched || isSubmitted)">
                <div class="invalid-feedback" style="display: block;">Please enter property identification
                    Number
                </div>
            </div>
        </div>
        <hr>
        <app-sharedfile></app-sharedfile>
        <div class="form-row">
            <div class=" ml-auto pb-3">
                <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
        </div>
    </div>
</form>
angular typescript
2 Answers

Since you already have

@ViewChild(SharedfileComponent) child1Component: SharedfileComponent;

you just need to call the validation from there, so you can just use:

this.child1Component.formFiles.invalid or this.child1Component.formFiles.valid

so just add this in your onSubmitFarmLocation method:

 onSubmitFarmLocation() {
    this.isSubmitted = true;
    this.isShowErrors = true;
    if (this.formLocation.invalid ) {
      return;
    }
    if (this.child1Component.formFiles.invalid) {
      console.log('form file invalid');
      return;
    }
    console.log(this.formLocation.value, this.formLocation.errors)
  
  }

update:

if you want to display error messages in shared component, first, you used isSubmitted in your html but not in your ts, so it wont never display. the tricky part is make onSubmitFarmLocation() to return a boolean, and depends on it if the submit can continue or not.

sharedfile.component.ts

onSubmitFarmLocation(): Boolean {
    this.isSubmitted = true;
    return this.formLocation.valid;  
  }

and in your component, during submit use it like:

onSubmitFarmLocation() {
  this.isSubmitted = true;
  this.isShowErrors = true;
  this.child1Component.onSubmitFarmLocation();
   
  if (this.formLocation.invalid ) {
    return;
  }
  if (this.child1Component.formLocation.invalid) {
    return;
  }

  console.log(this.formLocation.value, this.formLocation.errors)
}

updated stackblitz https://stackblitz.com/edit/angularfi-leupload-hvlegz

user_41520520

You can achieve this with the help of helper services and a simple Subject without doing much changes in your current code.

I have a service FileService which has a Subject which you can use in main component when user click on Save button.

export class FileService {
  checkFileUploadSubject = new Subject<boolean>();

  setCheckFileUploadValidity() {
    this.checkFileUploadSubject.next(true);
  }

  checkFileUploadValidity(): Observable<boolean> {
    return this.checkFileUploadSubject.asObservable();
  }
}

In your main component, you can notify the shared component by calling next method on this FileService Subject instance.

app.component.ts
 onSubmitFarmLocation() {
    this.isSubmitted = true;
    this.isShowErrors = true;
    this.fileService.setCheckFileUploadValidity();
    if (this.formLocation.invalid) {
      return;
    }

    console.log(this.formLocation.value, this.formLocation.errors);
  }

Then you can listen to the events emitted by this Subject in your shared component and check for the errors by marking FormContrls as touched.

ngOnInit() {
    this.fileService.checkFileUploadValidity().subscribe(value => {
      debugger;
      this.formLocation.markAllAsTouched();
    });
  }

Please find the working code here: https://stackblitz.com/edit/angularfi-leupload-xfpdfr

user_105786380
Related