Question

我正在使用Angular 6开发CMS，我有一个表单可以创建两种或两种以上语言的页面，具体取决于设置支持的语言环境。首先，我从api获取受支持的语言环境，假设响应有2个语言环境（en-fr）。因此，对于每种语言，我想在表单内部使用其自己的语言环境（如en ['title']，en ['body']，fr ['title']，fr ['body']构建一个选项卡。我试图建立这样的表格：

let forms = [];
for(let lang of this.supportedLocales) {
    forms.push(this.fb.group({
      title: ['', [Validators.required]],
      body: ['', [Validators.required]]
    }))
  }

  this.form = this.fb.group({
    template: ['default', [Validators.required]],
    is_home: [0],
    translatable: this.fb.array(forms)
  });
}

在HTML中：

<div class="tab-content">
    <div *ngFor="let lang of supportedLocales"
         class="tab-pane {{lang.locale === currentLang ? 'active' : ''}}"
         id="{{ 'tab_'+ lang.locale}}">

      <div class="form-group">
        <label [attr.for]="'title'+lang.locale">{{ translateField('page::pages.title') }}</label>
        <input formControlName="?" [attr.id]="'title'+lang.locale" class="form-control">
      </div>
    </div>
  </div>

如何为标题字段定义formControlName？我尝试使用FormArray，但它会导致问题，并且浏览器无法响应！

在这种情况下，我该怎么办？或最佳方法是什么？

Answer 1

我将仅在.map上使用this.supportedLocales，然后使用FormGroup方法生成getFormGroupForLocale。它是private，因为它不会在您的模板中使用。

现在，一旦表单准备就绪，首先我将使用form将整个表单绑定到[formGroup]="form"标记。之后，由于我的表单有一个FormArray，因此我首先必须为其创建一个包装div。为此，我将为div分配一个formArrayName="translatable"，它将把这个div映射到我的translatable FormArray中的form FormGroup。

在此，我将使用*ngFor="let group of localeFormArray; let i = index;"遍历FormGroup中的所有FormArray，然后使用div将它们绑定到包装的<div [formGroupName]="i"> 。请注意，我如何使用formGroupName作为属性绑定语法，并为其分配i中FormGroup的索引FormArray

最后，在此input的每个div标签内，我可以使用formControlName="title"和formControlName="body"绑定到每个{{1 }}中的FormControl。

方法如下：

FormGroup

对于组件类：

FormArray

这是您推荐的Sample StackBlitz。

角6反应形式。如何建立多种语言的表格

1 个答案: