Angular 2 How to set form builder or form group when we modify the current data in table, not sure how to use routerlink?

Question

   <tr *ngFor="let row of categories ">
    <td>{{row.categoryName}}</td>

    <td>{{row.visible}}</td>
    <td>{{row.instanceNumber}}</td>
    <td> <a class="btn btn-info btn-fill " [routerLink]="['/control/category']">Modify</a>
    </td>

Here i want to send the row/category object along with the routing, but i'm redirected to an empty form! i want to map the current row data to the original form so that i can modify only some fields not all.

I use formbuilder in angular!

ngOnInit() {
    this.relationForm = this.fb.group({
      relationName: ['', [Validators.required, Validators.minLength(3), Validators.pattern('[a-z]+([A-Z][a-z]*)*')  ]],
      humanFormat: ['', [Validators.required, Validators.minLength(3)]],
      populate: ['', [Validators.required, Validators.pattern('TRUE|FALSE')]],
      visible: ['', [Validators.required, Validators.pattern('TRUE|FALSE')]],
      generalizations: ['', [Validators.required, Validators.minLength(3),Validators.pattern('[a-z]+([A-Z][a-z]*)*') ]],

I know i have to use something like this but where and how is the question!

 this.productForm.patchValue({
            productName: this.product.productName,
            productCode: this.product.productCode,
            starRating: this.product.starRating,
            description: this.product.description
        });
        this.productForm.setControl('tags', this.fb.array(this.product.tags || []));

Answer 1

Here is a simplified example of your code. Where you iterate your data, have a click event where you pass the chosen item, something like this:

<div *ngFor="let relation of relations">
 {{relation.categoryName}} 
 <button (click)="modify(relation)">Modify</button>
</div>

Then in your click event let's store the chosen item in a service before navigating so that we can then fetch it after navigation:

modify(relation) {
  this.service.addRelation(relation);
  this.router.navigate(['your path here'])
}

With the above, we also need to inject Router in the constructor to be able to use it: private router: Router.

I'm not going to entirely explain the service, there is a detailed description in the official docs about this. The point is to use an observable, in this case we need something else than a Subject as Subject requires next() to emit values, whereas BehaviorSubject will always emit if there is a subscriber, more here in this Answer.

Service:

private relation = new BehaviorSubject<Object>({})

relation$ = this.relation.asObservable()

addRelation(relation) {
  this.relation.next(relation)
}

Then in your other component, where you have the form, subscribe to the observable in the service, and then build your form based on the values you get:

constructor(private service: RelationService, private fb: FormBuilder) {
  service.relation$.subscribe(relation => {
    this.relation = relation;
    this.buildForm();
  });
}

And then you just fill the values in your form with the object you have received:

buildForm() {
  this.relationForm = this.fb.group({
    categoryName: [this.relation.categoryName],
    author: [this.relation.author]
  });
}

So this is a simplified example that you can work with and adapt to your own code!

Finally, here's a DEMO to play with.