DEV Community

Cover image for how to remove the parent input field value on click of child component clear button?
kallaguntaashok
kallaguntaashok

Posted on

how to remove the parent input field value on click of child component clear button?

I have 2 issues facing with angular form.

<form autocomplete="off" ngNativeValidate class="row g-3 mb-3">

        <div class="col-md-12">
            <i class="bi bi-asterisk star"></i>
            <input type="text" placeholder="Description" id="txtBuildDescription" #BuildDescription name="Description" [(ngModel)]="build.BuildDescription" class="form-control form-control-sm" required>
        </div>

<app-info [build_row]="build_row" (parentSettings)="changSettings($event)" [build]="build"></app-info>

</form>
Enter fullscreen mode Exit fullscreen mode
<form #infoBuild="ngForm" ngNativeValidate name="infoBuild" (keydown.enter)="$event.preventDefault()"
        (ngSubmit)="initiateNewBuildRequest()" autocomplete="off" class="row g-3">

<div class="col-md-4">
            <input type="text" placeholder="Build Request No" name="BuildRequestNo" required [(ngModel)]="model.BuildRequestNo"
                class="form-control form-control-sm">
        </div>
        <div class="col-md-2">
            <input type="text" placeholder="Rev" name="BuildRequestNoRev" required [(ngModel)]="model.BuildRequestNoRev"
                class="form-control form-control-sm">
        </div>
        <div class="col-md-6">
            <input type="text" placeholder="Description" name="BuildRequestNoDescription" required
                [(ngModel)]="model.BuildRequestNoDescription" class="form-control form-control-sm">
        </div>

<div style="margin-top: 20px !important;" class="text-center">
           <button type="button" style="zoom: 75%;" (click)="clearBuilds()" class="btn btn-warning btn-sm"><i
                    class="bi bi-patch-minus"></i>&nbsp;Clear</button>           
        </div>
</form>
Enter fullscreen mode Exit fullscreen mode
  1. on click of child "clear" button I want to remove the value from the parent fields, how to remove the parent input fields.

  2. in the page I have 2 components, and the clear button is exist in child component, I am using required tag to validate the mandatory fields.

I am using ngNativeValidate to validate the form, it won' submit the form until user fill the required tag input fields.

in my case clear button is there in child component, and the form validation is working fine for child component fields, how do I make sure child button also should validate parent required input fields.

Top comments (2)

Collapse
 
gaurangdhorda profile image
GaurangDhorda

Can you please share more details with email id to grdtechlab@gmail.com Thanks. It will be more easy to communicate.

Collapse
 
kallaguntaashok profile image
kallaguntaashok

Hi, I sent a mail, please check.