Angular 获取错误：找不到名为&x27'；使用FormGroup创建动态窗体时角度

我是个新手。我想为调查创建一个动态表单。调查问题和输入类型是完全动态的，可能会根据区域而变化。我们以JSON的形式从API调用中获取它

下面是代码片段

.ts文件

export class MaintenanceSurveyComponent implements OnInit {
  myFormTemplate: any = []; 
  myFormGroup: FormGroup = new FormGroup({});
  
  WOId;
  @Input() public user;
  constructor(private maintenanceService: MaintenanceRequestService) { }

  ngOnInit() {
   this. myFormGroup = new FormGroup({});
    this.maintenanceService.getSurveyquestions(this.user)
      .subscribe((res: any) => {
        this.myFormTemplate = JSON.parse(res);        
    });
    let group = {}
    this.myFormTemplate.forEach(input_template => {
      group[input_template.hMy] = new FormControl({ value: input_template.hMy});
    })
    this.myFormGroup = new FormGroup(group);    
  }

  onSubmit() {
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.myFormGroup.getRawValue(), null, 4));
    console.log(this.myFormGroup.getRawValue());
    console.log("this is test");
  }

}

.html文件

<form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
    <div class="modal-header border-0">
      <h5 class="modal-title" id="addMaintenanceRequestsTitle">Maintenance Survey</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-lg-7">

          <div *ngFor="let form_elem of myFormTemplate">
            <div [ngSwitch]="form_elem.type">
              <div class="form-row">
                <div class="form-group col-md-12 mb-2" *ngSwitchCase="'textbox'">
                  <label class="text-sm font-weight-bold mb-1">{{form_elem.label}} </label>
                  <!--  <input type="text" formControlName="{{form_elem.hMy}}" />-->                
                  <input type="text"  formControlName="{{form_elem.hMy}}" required="{{form_elem.IsRequired}}" ngDefaultControl />
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-12 mb-2" *ngSwitchCase="'number'">
                  <label class="text-sm font-weight-bold mb-1">{{form_elem.label}} </label>
                  <!--<input type="number" formControlName="{{form_elem.label}}" />-->                  
                  <input type="number" formControlName="{{form_elem.hMy}}" required="{{form_elem.IsRequired}}" ngDefaultControl />
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-12 mb-2" *ngSwitchCase="'select'">
                  <!--<select formControlName="{{form_elem.label}}">-->               
                  <label class="text-sm font-weight-bold mb-1">{{form_elem.label}} </label>
                  <select  formControlName="{{form_elem.hMy}}" required="{{form_elem.IsRequired}}" ngDefaultControl >
                    <option *ngFor="let opt of form_elem.options">
                      {{opt}}
                    </option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer justify-content-start">
      <button type="submit" value="save" class="btn btn-primary">Submit</button>
    </div>
    <!--<input type="submit" value="save" />-->
  </form>

我尝试了各种各样的解决办法，但没有成功。我用的是角度8。

---

非常感谢您在这方面的帮助。

您需要将表单创建移到subscribe方法中，并等待响应，因为这是一个异步调用

export class MaintenanceSurveyComponent implements OnInit {
    myFormTemplate: any = [];
    myFormGroup: FormGroup = new FormGroup({});

    @Input() public user;
    constructor(private maintenanceService: MaintenanceRequestService) {}

    ngOnInit() {
        this.myFormGroup = new FormGroup({});
        this.maintenanceService.getSurveyquestions(this.user).subscribe((res: any) => {
            this.myFormTemplate = JSON.parse(res);

            let group = {};
            this.myFormTemplate.forEach((input_template) => {
                group[input_template.hMy] = new FormControl({ value: input_template.hMy });
            });
            this.myFormGroup = new FormGroup(group);
        });
    }

    onSubmit() {
        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.myFormGroup.getRawValue(), null, 4));
        console.log(this.myFormGroup.getRawValue());
        console.log('this is test');
    }
}

---

由于subscribe调用是异步的，所以在subscribe方法和checkPerfect中移动动态表单创建。谢谢你的帮助，你是个伟大的人。我没有意识到这一点，浪费了很多时间来解决这个问题。

export class MaintenanceSurveyComponent implements OnInit {
    myFormTemplate: any = [];
    myFormGroup: FormGroup = new FormGroup({});

    @Input() public user;
    constructor(private maintenanceService: MaintenanceRequestService) {}

    ngOnInit() {
        this.myFormGroup = new FormGroup({});
        this.maintenanceService.getSurveyquestions(this.user).subscribe((res: any) => {
            this.myFormTemplate = JSON.parse(res);

            let group = {};
            this.myFormTemplate.forEach((input_template) => {
                group[input_template.hMy] = new FormControl({ value: input_template.hMy });
            });
            this.myFormGroup = new FormGroup(group);
        });
    }

    onSubmit() {
        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.myFormGroup.getRawValue(), null, 4));
        console.log(this.myFormGroup.getRawValue());
        console.log('this is test');
    }
}