错误错误:找不到具有未指定名称属性的控件

时间:2020-07-22 14:23:59

标签: angular typescript angular-material

我在此站点以及其他站点上都查找了此错误,但是在这种情况下,没有一种解决方案有效。 我有一个表单模板,可以动态地将其加载到HTML文件中。当teamName为“ a”时,我没有收到此错误。但是,当teamName为“ b”时出现错误。

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">
<button mat-button class="close-icon" [mat-dialog-close]="true">
  <mat-icon>close</mat-icon>
</button><form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
    <div *ngFor="let form_elem of formTemplate">
      <div *ngIf="form_elem.id === flag">
        <div [ngSwitch]="form_elem.type">
          <div *ngSwitchCase="'textBox'">{{form_elem.value}}
            <input type="text" formControlName="{{form_elem.label}}" />
          </div>
          <div *ngSwitchCase="'number'">{{form_elem.value}}
            <input type="number" formControlName="{{form_elem.label}}"/>
          </div>
          <div *ngSwitchCase="'select'">{{form_elem.value}}
            <select formControlName="{{form_elem.label}}">
              <option *ngFor="let opt of form_elem.options">
                {{opt}}
              </option>
            </select>
          </div>  
        </div>  
      </div>
    </div>
    <div style=" display: flex; justify-content: center;">
      <input type="submit" value="save"/>
      <button class="reset" type="reset" value="Reset">Reset</button>
    </div>
  </form>

TS文件:

  ngOnInit() {
    console.log(this.data)
    
    let group={}
    this.teamService.currentData.subscribe(message => {this.teamName = message
      if(this.teamName == "a")
      { 
        this.flag = 1;
        form_template.forEach(input_template=>{
          group[input_template.label]=new FormControl('',Validators.required);  
        })
        this.myFormGroup = new FormGroup(group);
      }
      else if(this.teamName == "b")
      {
        this.flag = 2;
        form_template.forEach(input_template=>{
          group[input_template.label]=new FormControl('',Validators.required);  
        })
        this.myFormGroup = new FormGroup(group);
      }});
  }

我的form_template看起来像这样:

const form_template = [
  {
    "id":1,
    "type":"textBox",
    "value":"Name",
      "label":"Name"
  },
  {
    "id":1,
    "type":"select",
    "value":"xz", 
    "options":["Yes","No"], 
      "label":"xz"
  },
  {
    "id":1,
    "type":"textBox",
    "value":"college",
      "label":"college"
  }, 
  {
    "id":2,
    "type":"textBox",
    "value":"music",
      "la,bel":"music"
  },
  {
    "id":2,
    "type":"textBox",
    "value":"book",
      "la,bel":"book"
  },
  {
    "id":2,
    "type":"select",
    "value":"fruit",
    "options":["mango","banana"], 
      "label":"environment"
  },
  {
    "id":2,
    "type":"textBox",
    "value":"abc",
      "label":"abc"
  }
]
export default form_template;

1 个答案:

答案 0 :(得分:0)

我意识到输入错误。我在json中键入“ la,bel”而不是“ label”,这在我的代码中导致了上述错误。

相关问题