Verification for collaborative element

Question

Verification for collaborative element

I am currently working on creating a shared component for file uploads that can be reused whenever necessary. Interestingly, when I include the file upload code in the same HTML as the form, the validation functions properly. However, if I extract it into a separate component, the validation fails to work.

It is important to note that I only want to implement validation for files in certain components and not in others.

Please refer to this StackBlitz link to see the code example I have been experimenting with:

<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

Answer 1

Answer №1

To accomplish this task, you can utilize helper services along with a straightforward Subject without making extensive changes to your existing code.

For instance, consider a service called FileService that contains a Subject which can be accessed in the main component when the user clicks on the Save button.

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

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

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

In the main component, you can inform the shared component by invoking the next method on the 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);
  }

Subsequently, you can listen for events emitted by this Subject in your shared component and verify errors by marking FormControls as touched.

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

You can access the functional code sample here: https://stackblitz.com/edit/angularfi-leupload-xfpdfr

Answer 2

To accomplish this task, you can utilize helper services along with a straightforward Subject without making extensive changes to your existing code.

For instance, consider a service called FileService that contains a Subject which can be accessed in the main component when the user clicks on the Save button.

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

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

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

In the main component, you can inform the shared component by invoking the next method on the 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);
  }

Subsequently, you can listen for events emitted by this Subject in your shared component and verify errors by marking FormControls as touched.

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

You can access the functional code sample here: https://stackblitz.com/edit/angularfi-leupload-xfpdfr

Answer 3

Answer №2

After setting up the ViewChild for SharedfileComponent like this:

@ViewChild(SharedfileComponent) child1Component: SharedfileComponent;

You can simply call the validation from there using:

this.child1Component.formFiles.invalid

or

this.child1Component.formFiles.valid

To integrate it into your onSubmitFarmLocation method, just add the following code:

 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 the shared component, ensure that you are using isSubmitted correctly in both HTML and TypeScript files. Refactor your onSubmitFarmLocation() method to return a boolean value based on form validity.

In sharedfile.component.ts:

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

Then, in your component's submit logic, utilize this updated method like so:

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)
}

For an updated demonstration, refer to this StackBlitz link: https://stackblitz.com/edit/angularfi-leupload-hvlegz

Answer 4

After setting up the ViewChild for SharedfileComponent like this:

@ViewChild(SharedfileComponent) child1Component: SharedfileComponent;

You can simply call the validation from there using:

this.child1Component.formFiles.invalid

or

this.child1Component.formFiles.valid

To integrate it into your onSubmitFarmLocation method, just add the following code:

 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 the shared component, ensure that you are using isSubmitted correctly in both HTML and TypeScript files. Refactor your onSubmitFarmLocation() method to return a boolean value based on form validity.

In sharedfile.component.ts:

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

Then, in your component's submit logic, utilize this updated method like so:

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)
}

For an updated demonstration, refer to this StackBlitz link: https://stackblitz.com/edit/angularfi-leupload-hvlegz

Verification for collaborative element

Answer №1

Answer №2

Similar questions

Formatting Strings in JavaScript when saving as a .txt file with proper indentation

Awaitable HttpResponseError

Challenges with Angular observables

Opening a modal from a different component in Angular 6

Using Angular 8 for Filtering Firebase Data

Promise rejection not handled: The play() function was unsuccessful as it requires the user to interact with the document beforehand

Error message: Angular encountered a SyntaxError when parsing JSON data due to an unexpected character at the beginning of the data

Is there a way to determine the total number of angular components in my app using IntelliJ IDE?

Adding multiple classes to a condition in Angular can be achieved by using the ngClass directive

What is the method for accessing a validator that has been declared in a reactive form group while within the scope of a custom

Secure your NetSuite API calls with OAuth 1.0 signature authorization

Unlocking the secrets of integrating Vuex store with JavaScript/TypeScript modules: A comprehensive guide

Do not send the Angular 2 HTTP request with headers

Issue with Angular 8: discrepancy between the value utilized in component.html and the value stored in component.ts (Azure application service)

Error: Prisma seed - encountering issues with undefined properties (unable to read 'findFirst')

Is importing all models into every component considered poor practice?

What is the best way to accurately parse a Date object within a TypeScript class when the HttpClient mapping is not working correctly?

Troubleshooting Angular2 Router: Version 3.0.0-alpha.8 - Issue with resolving parameters for provideRouter function

Error: `__WEBPACK_IMPORTED_MODULE_1_signature_pad__` does not function as a constructor

What could be causing the first() rxjs operator to repeatedly return an array?