CODEWITHSUNDEEP
angular
RRB
RRB

Reputation: 2116

Clear a form value in Angular

I have an Angular form that contains a select box. The select box has an onChange event which should trigger a method to clear an input field also found in the form however nothing seems to be working.

html

<div class="ui-g-12 ui-md-12">
    <div class="ui-g-6 ui-sm-12">
        <div class="input-container">
            <label for="identityTypeId">Identity document type*</label>
            <p-dropdown [options]="identityDocTypeArr"(onChange)="clearIDNumberField()" formControlName="identityTypeId" id="identityTypeId" placeholder="Select"></p-dropdown>
        </div>
    </div>
    <div class="ui-g-6 ui-sm-12">
        <div class="input-container">
            <label for="identityValue">Identity number*</label>
            <input id="identityValue" type="text" formControlName="identityValue" size="50" placeholder="0000000000000" (blur)="validateSouthAfricanID()">
        </div>
    </div>
</div>

TS

clearIDNumberField() {
    this.offerFormGroup.get("identityValue").reset(); 
}

My forms name is [formGroup]="offerFormGroup"

Upvotes: 1

Views: 1800

Answers (7)

Raj Gohel
Raj Gohel

Reputation: 1102

You should use the setvalue('') method.

Upvotes: 0

Dixit Savaliya
Dixit Savaliya

Reputation: 413

You can Try below function

clearIDNumberField() {
 this.offerFormGroup.identityValue = ''; 
}

Upvotes: 0

ramesh sharma
ramesh sharma

Reputation: 254

You can reset with: 

this.offerFormGroup.get("identityValue").setValue('')

and 

this.offerFormGroup.controls["identityValue"].setValue('');

Upvotes: 0

Bernard White Danquah
Bernard White Danquah

Reputation: 140

Hello skyDev it looks like your code 

 clearIDNumberField() {
    this.offerFormGroup.get("identityValue").reset(); 
  }

is not working because your reference the correct name of the formControl which if I am correct should identityTypeId. Hence what is wrong is actualy the control name been referenced. That been said the code should 

  clearIDNumberField() {
        this.offerFormGroup.get("identityTypeId").reset(); 
      }

instead of 

clearIDNumberField() {
    this.offerFormGroup.get("identityValue").reset(); 
  }

It might have been of good help if you had posted the contents of your formGroup variable too, but all the try the above changes.

Upvotes: 1

NTP
NTP

Reputation: 4448

You can use setValue to set/clear the value of your input

this.offerFormGroup.controls['identityTypeId'].setValue("");

Upvotes: 2

Bernard White Danquah
Bernard White Danquah

Reputation: 140

You can clear the forms value, in this case all the controls that makes up the form:

clearIDNumberField() {
     this.offerFormGroup.reset(); 
   }

This will reset the form to normal.

Upvotes: 0

Dixit Savaliya
Dixit Savaliya

Reputation: 413

Try This,

   clearIDNumberField() {
     this.offerFormGroup.reset(); 
   }

Upvotes: 0

Related Questions