How to clear an Angular reactive form input values

Question

I have a simple reactive form set up like this

constructor(private scheduleService: ScheduleService, fb: FormBuilder) {
this.searchForm = fb.group({
  from: ["", Validators.required],
  to: ["", Validators.required],
  date: ["", Validators.required]
});
}

I want to clear the form fields by click on a button that calls the clear function. My clear function currently doesn't work and looks like this

clear() {
console.log("Reset all search form fields to null.");

this.searchForm.from = "";
this.searchForm.to = "";
this.searchForm.date = "";
}

What is the right way to clear form input fields when working with angular reactive forms? How can I achieve this by using a single statement to reset all form fields instead of individual fields?

@ConnorsFan thanks for your comment. Found the solution there. — Mena
– Mena, Commented Mar 1, 2019 at 3:02

Sanka Sanjeeva · Accepted Answer · 2021-05-17 10:19:54Z

13

  ngOnInit(): void {
    this.searchForm = this.fb.group({
      from: ['', Validators.required],
      to: ['', Validators.required],
      date: ['', Validators.required]
    });
  }

reset complete form

  resetForm() {
    this.searchForm.reset();
  }

reset individual field

  resetFrom() {
    this.searchForm.get('from').reset();
  }

answered May 17, 2021 at 10:19

Sanka Sanjeeva

3,85830 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vishnu t · Accepted Answer · 2023-11-28 08:19:59Z

0

"data" will be your form data

   searchForm!: FormGroup;

   this.searchForm = this.formBuilder.group({
      name: [''],
      address: ['']
    });

     clearForm() {
        try{
          let data={
               name:'',
               address:''
              }
           this.searchForm.reset(data);
         }
        catch(ex){
          console.log(ex)
         }
    
        }

answered Nov 28, 2023 at 8:19

vishnu t

213 bronze badges

Comments

Akrimi Zoulfa · Accepted Answer · 2022-04-16 13:08:08Z

-1

for reset one input

 ngOnInit(): void {
    this.searchForm = this.fb.group({
      from: ['', Validators.required],
      to: ['', Validators.required],
      date: ['', Validators.required]
    });
  }

convenience getter for easy access to form fields

  get f() { return this.registerForm.controls; }

reset one field exmple (from )

this.f.from.reset();

answered Apr 16, 2022 at 13:08

Akrimi Zoulfa

11 silver badge3 bronze badges

1 Comment

Mordecai Over a year ago

This is absolutely wrong, first, it doesn't solve the issue, then even if it does, this is going to reset the whole form, whereas you said it'll reset one field!

Collectives™ on Stack Overflow

How to clear an Angular reactive form input values

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related