How to reload form in Angular component

Question

I have a component which is used for route navigation without component reload:

export class TableComponent extends SafeComponent implements OnInit {
  customersMe$: Observable<ICompanyCustomer>;
  customersMe: ICompanyCustomer;
  tables$: Observable<ITable[]>;
  headersLoaded$: Observable<boolean>;
  headerLoading = true;

  table: ITable;
  TableForm: FormGroup;
  constructor(
    private store: Store<State>,
    private router: Router,
    private route:ActivatedRoute,
    private changeDetectorRef: ChangeDetectorRef,
  ) {
    super();
  }

  ngOnInit(): void {
    this.tables$ = this.store.pipe(select(getTables));
    this.headersLoaded$ = this.store.pipe(select(getLoaded));

    combineLatest([this.tables$, this.headersLoaded$, this.route.params])
      .subscribe(([tables, loaded, params]) => {
        if (loaded) {
          this.headerLoading = false;
          const table = tables.find(x => x.id === Number(params['id']));
          if (table) {
            this.table = table;
          } else {
            // navigate 404
          }
          this.changeDetectorRef.detectChanges();
        }
      })


  /*  this.tableForm = new FormGroup({
   *    start: new FormControl(this.table.time_start),
   *    end: new FormControl(this.table.time_finish)
   *});*/

  }
}

As you notice here I subscribe to route and update data on new id in route path. How can I update data in Form Group? Thank you!

hi if you just wanna know how to update a form take a look about patchValue ? exemple : this.form.patchValue({ name: 'Todd Motto', event: { title: 'AngularCamp 2016', location: 'Barcelona, Spain' } }); — Arigui Ahmed
– Arigui Ahmed, Commented Sep 15, 2020 at 9:16

Prakash Harvani · Accepted Answer · 2020-09-15 10:01:10Z

2

In Angular If you want to reload the form. then you need to do like this,

this.form.reset();

& when you are on a new route then you can do this.

this.form.patchValue({name: '---', age:'---'});

answered Sep 15, 2020 at 10:01

Prakash Harvani

1,0418 silver badges18 bronze badges

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

Comments

Prakash Harvani · Accepted Answer · 2020-09-15 10:03:55Z

1

If you are trying to populate the form fields with values, you could try: For populating all fields:

this.form.setValue({name: 'Kakashi', address: { village: 'Konoha', country: 'Fire'}});

For populating some fields:

this.form.patchValue({name: 'Kakashi', address: { village: 'Konoha', country: 'Fire'}});

edited Sep 15, 2020 at 10:03

Prakash Harvani

1,0418 silver badges18 bronze badges

answered Sep 15, 2020 at 9:46

Kunal Karmakar

5917 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to reload form in Angular component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related