Как отобразить форму с помощью formGroup внутри строки таблицы в angular 8

Question

Я хочу отобразить форму внутри строки таблицы. Каждая строка имеет функциональность самооценки. и пользователь может редактировать индивидуальный рейтинг факторов. поэтому я хочу, чтобы каждая строка имела функции вставки позже при редактировании и обновлении, а также. Вот почему я использую форму внутри таблицы с входной строкой, но formGroup получаю ошибку. затем после того, как я использовал форму перед таблицей. Я получил те же ошибки. Здесь моя ошибка

**Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'**.

Вот мой код. html file

`<form [formGroup]="appraisalApplyForm" (ngSubmit)="submitApplyAppraisal()">

                    <table class="table table-bordered" style="overflow-y: auto;">
                        <thead>
                          <tr>
                            <th class="pdten">Rating Factors</th>
                            <th class="pdten">Self Appraisal Rating </th>
                            <th class="pdten">Supervisor Appraisal Rating</th>
                            <th class="pdten">Justification/Remark</th>
                             <th class="pdten">Action</th>
                          </tr>
                        </thead>
                        <tbody>

                          <ng-container *ngFor="let factor of factors; index as i">

                          <tr  *ngIf="factor.department_id ===parameter.id">

                            <!-- <form method="post" [formGroup]="appraisalApplyForm" (ngSubmit)="submitApplyAppraisal()"> -->
                              <td class="pd_custom  fw " >{{factor.rating_factor_name}}</td>
                              <input type="hidden" formControlName = "department_id" value="{{parameter.id}}"/>
                              <input type="hidden" formControlName = "factor_id" value="{{factor.id}}"/>
                              <td><input class="form-control" id="" placeholder="Enter Rating.."  type="text" formControlName = "self_rating[]"></td>
                              <td><input class="form-control" id="" placeholder="Enter Rating.."  type="text" formControlName = "supervisor_rating[]"></td>
                              <td>
                                <textarea class="form-control" id="" placeholder="remark.." formControlName = "remark[]"></textarea>
                              </td>
                              <td><input type="submit" class="btn bg-olive btn-flat margin  " value="submit"></td>
                            <!-- </form> -->

                          </tr>
                        </ng-container>


                        </tbody>
                    </table>
                    <div class="box-footer">
                      <input type="submit" class="btn bg-olive btn-flat margin  " value="submit">
                  </div>
                  </form>`.

.ts file code

export class AppraisalApplyComponent implements OnInit {
  appraisalApplyForm :FormGroup;
  constructor(private _services: ApiService, private router: Router, private fb: FormBuilder,
    private http: HttpClient) { }

    factors:any;
    parameters:any;

    data = {

    }
  ngOnInit() {

    this.getRatingFactorParameter();
    this.getRatingFactors();
    this.appraisalApplyForm = this.fb.group({
      factor_id: [''],
      department_id: [''],
      self_rating: [''],
      supervisor_rating: [''],
      remark: [''],
      //arr: this.fb.array([])

    });


  }
    submitApplyAppraisal(){
    let route = 'add-apply-appraisal';
    let data = this.appraisalApplyForm.value;
     alert(data);
     return ;
    const token = localStorage.getItem('token')?localStorage.getItem('token'):''; 
    console.log(data);
    this._services.requestCreator(data, route, token).subscribe((result: any) => {
      console.log(result.result);
      if (result.status = 200) {
        alert('Rating Factor Data Added Successfully !.');
        console.log("Form Submitted!");
       // this.applyAppraisalForm.reset();
      }
    });

Добро пожаловать за любые предложения по улучшению кодирования.

Answer 1

Во-первых, вы не можете использовать форму внутри таблицы. Это будет искажать дерево DOM. Во-вторых, Вы хотите, чтобы каждый ряд имел уникальную функциональность. Для этого вам нужно будет объявить массив групп форм и передать в него данные каждой строки.

В вашей форме (ngOnInit) вы объявили только одну группу форм. Я рефакторинг вашего кода. Посмотри. Обратите внимание, что это не весь код.

. html файл

<form [formGroup]="appraisalApplyForm"  class="">
  <div formArrayName="appraisalForm">
    <div
      *ngFor="let appraisalForm of appraisalApplyForm.get('appraisalForm')['controls']; let i = index">
      <form [formGroup]="appraisalForm" (ngSubmit)="submitApplyAppraisal(appraisalForm.value)">
        <tr>
        <td class="pd_custom  fw ">--</td>
        <td><input class="form-control" id="self_rating_{{i}}" placeholder="Enter Rating.."  type="text" formControlName = "self_rating"></td>

        <td><input class="form-control" id="supervisor_rating_{{i}}" placeholder="Enter Rating.."  type="text" formControlName = "supervisor_rating"></td>
        <td>
          <textarea class="form-control" id="remark_{{i}}" placeholder="remark.." formControlName = "remark"></textarea>
        </td>
        <td><input type="submit" class="btn bg-olive btn-flat margin  " value="submit"></td>
        </tr>
      </form>
    </div>
  </div>
</form>

.ts файл

export class AppraisalApplyComponent  implements OnInit {
  name = 'Angular';
   appraisalApplyForm :FormGroup;
  constructor(private fb: FormBuilder) { }

    factors:any;
    parameters:any;


    new_factors = [
      {
        department_id: '1',
        rating_factor_name : 'none',
        self_rating : 2,
        supervisor_rating: 3,
        remark: 'Temp'
      },
       {
         department_id: '2',
        rating_factor_name :'none',
        self_rating : 6,
        supervisor_rating: 2,
        remark: 'qwertyuiop'
      },
       {
         department_id: '3',
        rating_factor_name : 'none',
        self_rating : 6,
        supervisor_rating: 9,
        remark: 'asdfghjkl'
      },
    ]

    data = {

    }
    get formArray() { return <FormArray>this.appraisalApplyForm.get('appraisalForm'); }

  ngOnInit() {
    this.appraisalApplyForm = this.fb.group({
       appraisalForm : this.fb.array([])
    });
    this.fill_appraisal_form(this.new_factors);
    console.log(this.appraisalApplyForm);
  }

  addForm() {
    const control = <FormArray>this.appraisalApplyForm.controls['appraisalForm']; 
    control.push(
      this.fb.group({
        factor_id: this.fb.control(''),
        department_id: this.fb.control(''),
        self_rating: this.fb.control(''),
        supervisor_rating: this.fb.control(''),
        remark: this.fb.control(''),
      })
    );
  }

 fill_appraisal_form(form_list) {
    for (let i = 0; i < form_list.length; i++ ) {
      if (this.formArray.length < form_list.length) {
        this.addForm();
      }

      this.formArray.at(i).patchValue({
        department_id: form_list[i].department_id,
        self_rating: form_list[i].self_rating,
        supervisor_rating: form_list[i].supervisor_rating,
        remark: form_list[i].remark
      });
    }
  } 

    submitApplyAppraisal(data){
    let route = 'add-apply-appraisal';
    // let data = this.appraisalApplyForm.value;
     console.log(data);
     return ;
    const token = localStorage.getItem('token')?localStorage.getItem('token'):''; 
    console.log(data);
    this._services.requestCreator(data, route, token).subscribe((result: any) => {
      console.log(result.result);
      if (result.status = 200) {
        alert('Rating Factor Data Added Successfully !.');
        console.log("Form Submitted!");
       // this.applyAppraisalForm.reset();
      }
    });
    }
}