1

我正在使用 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 但它会导致问题并且浏览器没有响应！

对于这种情况，我应该怎么做或最好的方法是什么？

4

1 回答 1

1

我将只使用.maponthis.supportedLocales然后使用该方法生成FormGroups 。getFormGroupForLocale因为它private不会在您的模板中使用。

现在一旦表单准备好，首先我将form使用[formGroup]="form". 在那之后，由于我的表单有一个FormArray，我首先必须div为它创建一个包装。为此，div我将分配formArrayName="translatable"哪个将这个 div 映射到我translatable FormArray的form FormGroup.

在此内部，我将使用*ngFor="let group of localeFormArray; let i = index;"循环遍历FormGroupmy 中的所有 sFormArray并将它们绑定到div使用<div [formGroupName]="i">. 请注意我如何使用formGroupNameas 属性绑定语法并将其分配i给FormGroup我FormArray

最后在 this 的每个标签input内div，我可以使用formControlName="title"andformControlName="body"绑定到.FormControlFormGroupFormArray

就是这样：

<form [formGroup]="form">
  template
  is_home
  translatable
  <label for="template">Template</label>
  <input type="text" id="template" formControlName="template">

  <br><br>

  <label for="is_home">Is Home</label>
  <input type="text" formControlName="is_home" id="is_home">

  <br><br>

  <h1>translatable</h1>
  <div formArrayName="translatable">
    <div *ngFor="let group of localeFormArray; let i = index;">
      <div [formGroupName]="i">
        <label 
          [for]="'title'+supportedLocales[i].lang.locale">
          {{ translateField('page::pages.title') }}
        </label>
        <input 
          formControlName="title" 
          [id]="'title'+supportedLocales[i].lang.locale" 
          class="form-control">

        <br><br>

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

      </div>
    </div>
  </div>


</form>

对于组件类：

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  supportedLocales = [
    { lang: { locale: 'en-US' } },
    { lang: { locale: 'en-FR' } },
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      template: ['default', [Validators.required]],
      is_home: [0],
      translatable: this.fb.array(this.supportedLocales.map(locale => this.getFormGroupForLocale(locale)))
    });
  }

  private getFormGroupForLocale(language) {
    return this.fb.group({
      title: [language.lang.locale + 'Title', [Validators.required]],
      body: [language.lang.locale+'Body', [Validators.required]]
    });
  }

  ...

  get localeFormArray() {
    return (<FormArray>this.form.get('translatable')).controls;
  }

}

这是您参考的示例 StackBlitz。

于 2018-10-14T06:21:01.787 回答