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?

Ketone

Possible duplicate of Cleanest way to reset forms – Jaella

@ConnorsFan thanks for your comment. Found the solution there. – Ketone

Answer 1

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

Sharpedged

Answer 2

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

Lorindalorine

Answer 3

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();

Lindgren

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! – Fitzger