如何在 Angular 8 中使用表格行内的 formGroup 显示表单

Question

我想在表格行内显示表格。每行都有因素明智的自我评价功能。用户可以编辑个人因素评级。所以我想显示每一行在稍后编辑和更新时都具有插入功能。这就是为什么我在表格内使用表格，但 formGroup 出现错误。然后在我使用表格之前的表格之后。我有同样的错误。 这是我的错误

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

这是我的代码 .html 文件

`<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 文件代码

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