1

我有三个选项卡，默认情况下，第一个选项卡应该打开带有表单的详细信息。我使用角度 io 文档
https://angular.io/guide/dynamic-form中给出的示例动态生成每个选项卡表单

下面是模板

<div class="tab-content">          
    <form [formGroup]="myform" novalidate (submit)="onSubmit()">          
       <div   [ngClass]="{'dynamic-field-inline': feild.isTwoElementInTheRow}" class="form-group" *ngFor="let feild of templateData[dataIndex].details">
           <label [attr.for]="feild.name">{{feild.label}}</label>
               <div [ngSwitch]="feild.type">
                 <input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="feild.key" [id]="feild.key" [type]="feild.type">
                    <select class="form-control" [id]="feild.key" *ngSwitchCase="'dropdown'" [formControlName]="feild.key">
                        <option *ngFor="let opt of feild.options" [value]="opt.key">{{opt.value}}</option>
                    </select>
                    <textarea *ngSwitchCase="'textarea'" class="form-control" [formControlName]="feild.key" rows="5" [id]="feild.key"></textarea>
                  </div>

                  <!--<div class="errorMessage" *ngIf="!myform.controls[feild.key].valid">{{feild.label}} is required</div>-->

                </div>
              <div class="form-row">
                  <button  type="submit" [disabled]="!myform.valid">Save</button>
              </div>
              </form>
            </div>

下面是打字稿代码

let fields = [{
            "key": "brave",
            "type": "textbox",
            "label": "Bravery Rating",
            "required": true,
            "readable": true,
            "isTwoElementInTheRow": false
        },
        {
            "key": "brave1",
            "label": "Bravery Rating",
            "type": "dropdown",
            "isTwoElementInTheRow": false,
            "options": [{
                    "key": "solid",
                    "value": "Solid"
                },
                {
                    "key": "great",
                    "value": "Great"
                },
                {
                    "key": "good",
                    "value": "Good"
                },
                {
                    "key": "unproven",
                    "value": "Unproven"
                }
            ]
        },
        {
            "key": "brave2",
            "label": "Bravery Rating",
            "type": "textarea"
        },
        {
            "key": "brave3",
            "type": "textbox",
            "label": "Bravery Rating"

        }
    ];
let group: any = {};

fields.forEach(field => {
  group[field.key] = field.required ? new FormControl(field.value || '', Validators.required)
                                          : new FormControl(field.value || '');
});
this.myForm = new FormGroup(group);

现在，当我点击 url 时，我收到一条错误消息

 CreateTemplateComponent.html:31 ERROR Error: Cannot find control with name: 'brave'
at _throwError (forms.js:2432)
at setUpControl (forms.js:2300)
at FormGroupDirective.addControl (forms.js:6664)
at FormControlName._setUpControl (forms.js:7314)
at FormControlName.ngOnChanges (forms.js:7227)
at checkAndUpdateDirectiveInline (core.js:12358)
at checkAndUpdateNodeInline (core.js:13886)
at checkAndUpdateNode (core.js:13829)
at debugCheckAndUpdateNode (core.js:14722)
at debugCheckDirectivesFn (core.js:14663)

但是当我切换标签时它正在工作。谁能帮帮我吗。

4

2 回答 2

1

最后，我遇到了这个问题，因为我的表单在我的实际 formGroups 准备好之前就已经准备好了。

我的 html 是

  <form [formGroup]="myform" novalidate (submit)="onSubmit()">

  <div class="form-group" *ngFor="let feild of templateData">
  //forms fileds
  </div>

现在我已经初始化

  myform: FormGroup = new FormGroup({});

  this.myform = data (Where all fields are converted into FormControl's)

然后我开始了

  this.templateData = data['subnodes'];
于 2018-07-11T06:31:14.753 回答
0

您可以通过在所有控件都已初始化之前不呈现表单来解决此问题。我使用下面的代码来消除错误消息。

模板：

<form [formGroup]="rulesForm" *ngIf="renderForm()">
<div *ngFor="let item of data">
  <mat-form-field appearance="outline" >
    <mat-label>{{item.label}}</mat-label>
    <input matInput [formControlName]="item.name">
  </mat-form-field>
  <br />
</div>

.TS 其中 this.data 是对象数组：

  ngOnInit(): void {
    this.rulesForm = this.formBuilder.group({});
  }

  ngAfterViewInit(): void {
    this.setupRulesForm();
  }

  setupRulesForm(): void {
    for(let rule of this.data) {
      this.rulesForm.addControl(rule.name, new FormControl(''));
    }
  }

  renderForm(): boolean {
    return Object.keys(this.rulesForm.controls).length === this.data.length;
  }
于 2021-09-27T15:14:58.327 回答