标签: reactive-forms

这里已经存在类似的问题(设置初始值Angular 2 reactive formarray)但我对答案不满意或者可能正在寻找其他解决方案.

我认为使用FormArray的重点是传递对象数组,它应该创建相同数量的组件.但是在上面的示例中,如果查看提供的plunker,即使提供了两个Addresses对象,也会创建一个Address,因为它的空白版本已经在ngOnInit()中创建.

所以我的问题是,如果在ngOnInit()我有这样的地址:this._fb.array([])//空白列表,那么我该如何设置它的值,它动态地从N个地址创建N个地址在我的TypeScript数组中？

我正在使用Angular2处理应用程序.我试图在我的应用程序中使用Reactive Forms但我遇到了一些错误:

第一个错误是关于NgControl,如下所示:

没有NgControl的提供者("

div class ="col-md-8"[ERROR - >] input class ="form-control"id ="productNameId""):ProductEditComponent @ 16:24

第二个错误是关于ControlContainer,如下所示:

没有ControlContainer的提供者("div [ERROR - >] div formArrayName ="tags">

div class ="row">

按钮cl"):

Htmm文件如下:

 <div class="panel panel-primary">
   <div class="panel-heading">
      {{pageTitle}}
</div>

<div class="panel-body">
    <form class="form-horizontal"
          novalidate
          (ngSubmit)="saveProduct()"
          formGroup="productForm" >
        <fieldset>
            <div class="form-group" 
                 [ngClass]="{'has-error': displayMessage.productName }">
                <label class="col-md-2 control-label" for="productNameId">Product Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                            id="productNameId" 
                            type="text" 
                            placeholder="Name (required)" 
                            formControlName="productName" />
                    <span class="help-block" *ngIf="displayMessage.productName">
                            {{displayMessage.productName}}
                    </span>
                </div>
            </div>


 <div formArrayName="tags">
                <div class="row">
                    <button class="col-md-offset-1 col-md-1 btn btn-default" …

我有一个包含很多表单控件和一些控件的验证器的表单，例如：

title = new FormControl("", Validators.compose([
    Validators.required
]));
description = new FormControl("", [
    Validators.required,
    Validators.minLength(1),
    Validators.maxLength(2000)
]);

如何添加不验证控件的另存为草稿按钮？或删除它们？

我尝试了很多示例，例如：

saveDraft() {
   this.addProjectForm.controls.title.clearValidators();
   this.addProjectForm.controls.title.setErrors(null);
   this.addProjectForm.controls.title.setValidators(null);
}

要么

saveDraft() {
   this.addProjectForm.controls['title'].clearValidators();
   this.addProjectForm.controls['title'].setErrors(null);
   this.addProjectForm.controls['title'].setValidators(null);
}

但没有任何效果..

我希望我的FormControl( FormGroup/ FormArray) 是强类型的，所以当我有例如

interface SomeSource {
  id: string;
  name: string;
}

我把它变成了例如

let form = new FormGroup<SomeSource>({
  id: new FormControl('test id'),
  name1: new FormControl('test name')
});

TypeScript 抛出了一个错误：在name上找不到FormGroup。

同样在理想的世界中form.value应该是SomeSource类型（而不是any）。

问题是没有办法为任何AbstractFormControl孩子指定这个泛型类型。

我认为这很容易FormGroup用自己的界面覆盖。但是，有没有办法仅使用 Angular 来实现这一目标？如果没有，是否有第三方解决方案？

动机：我想轻松重构我的SomeSource. 目前，当我重构SomeSource界面时，表单未适配且未抛出错误 => 存在一些错误的空间。

我的计划是将表单的值存储在我的ngrx商店中,以允许我的用户浏览网站并返回表单(如果他们愿意).我们的想法是,表单的值将使用可观察对象从商店重新填充.

这是我目前正在做的事情:

constructor(private store: Store<AppState>, private fb: FormBuilder) {
    this.images = images;
    this.recipe$ = store.select(recipeBuilderSelector);
    this.recipe$.subscribe(recipe => this.recipe = recipe); // console.log() => undefined
    this.recipeForm = fb.group({
      foodName: [this.recipe.name], // also tried with an OR: ( this.recipe.name || '')
      description: [this.recipe.description]
    })
  }

商店给出了一个初始值,我已经看到它正确地通过我的选择器函数,但是当我的表单被创建时,我不认为该值已经返回.因此this.recipe仍未定义.

这是错误的方法,还是我能以某种方式确保在创建表单之前返回observable？

我有用于创建和编辑操作的反应式表单。对于编辑，我只是在表单上，​​就像一个魅力，但来自 PrimeNg InputText 组件的浮动标签没有注意到有值填充。当我单击其中一个输入然后对其进行模糊处理时，每个输入都会更新视图并且所有标签都在顶部。patchValue(data)