title: Checkbox in table to select table row in Angular
body: <p>I have a table in Angular 6, it has a checkbox in there? What I want to be able to do is select the table row, i.e checkbox, then hit a select button and that gets submitted. I was wondering does the table have to be wrapped in a <code>&lt;form&gt;</code>. The structure of my HTML so far is but it does not work: </p>
  
  <pre><code> &lt;form [formGroup]="assetForm" (ngSubmit)="onSubmit()"&gt;
       &lt;table class="table table-striped table-hover mb-10"&gt;
           &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Number&lt;/th&gt;
                &lt;th&gt;Sev&lt;/th&gt;
                &lt;th&gt;Phone&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
               &lt;tr *ngFor="let incident of data"&gt;
                 &lt;td&gt;
                    &lt;label class="form-radio"&gt;
                      &lt;input type="radio" name="id_number" value="id_number"&gt;
                      &lt;i class="form-icon"&gt;&lt;/i&gt;{{incident.number}}
                    &lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;{{incident.sev}}&lt;/td&gt;
                  &lt;td&gt;{{incident.phone}}&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
         &lt;/table&gt;
         &lt;button class="btn btn-primary" [disabled]="!Form.valid" type="submit"&gt;Select&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>Ts.file</strong></p>
  
  <pre><code>onSubmit() {
      if (this.assetForm.invalid) {
        this.assetForm.setErrors({ ...this.assetForm.errors, 'required': true });
        return;
      }
      this.uploading = true;
      this.service.post(this.assetForm.value).subscribe((response: any) =&gt; {
        console.log(response);//On success response
  
      }, (errorResponse: any) =&gt; {
        console.log(errorResponse); //On unsuccessful response
        this.error = true;
        this.uploading = false;
      });
    }
  </code></pre>