标签: angular2-formbuilder

我有一个formbuilder组,我正在使用valueChanges监听更改并触发一个保存函数,然后在表单上刷新函数:

 this.ticketForm.valueChanges.debounceTime(1000).distinctUntilChanged()
 .subscribe(data => {
   this.saveTicket();
   this.refreshTicket();
 })

然后我重新加载表单并使用patchValue将数据重新分配到表单字段(以及页面上的其他位置,特别是更改日志),例如:

    this.ticketForm.patchValue(ticket, { emitEvent: false });

但是,尽管emitEvent:false,这会导致表单的无限循环保存.

这是一个Angular 4/Ionic 3错误还是我的误解？

有没有办法在使用Reactive表单时以角度禁用整个表单.我知道可以逐个禁用它们.

 this.tempForm = this.fb.group({
  m26_type:  '',
  m26_name:  ''
 })
this.tempForm.get('m26_type').disable();

是否可以禁用整个表单而不是单独禁用每个控制器？

我正在开发一个模型驱动的表单,我无法将它添加到使用ngFor显示的列表中.我在尝试迭代列表时遇到错误.

错误:

Error: Cannot find control with path: 'locations -> i'
    at new BaseException (exceptions.ts:21)
    at _throwError (shared.ts:80)
    at Object.setUpFormContainer (shared.ts:66)
    at FormGroupDirective.addFormGroup (form_group_directive.ts:74)
    at FormGroupName.AbstractFormGroupDirective.ngOnInit (abstract_form_group_directive.ts:37)
    at DebugAppView._View_PersonFormComponent4.detectChangesInternal (PersonFormComponent.ngfactory.js:3197)
    at DebugAppView.AppView.detectChanges (view.ts:260)
    at DebugAppView.detectChanges (view.ts:378)
    at DebugAppView.AppView.detectContentChildrenChanges (view.ts:279)
    at DebugAppView._View_PersonFormComponent2.detectChangesInternal (PersonFormComponent.ngfactory.js:1995)
Raw  person-form-builder.service.ts

formBuilderService:

import {Injectable} from "@angular/core";
import {Validators, FormBuilder} from '@angular/forms';

import {Person} from './../components/person/person';

@Injectable()

export class PersonFormBuilderService {

    constructor(private fb: FormBuilder) {
    }

    getForm(person: Person) {
        return this.fb.group({
            _id: [person._id],
            name: this.fb.group({
                first: [person.name.first],
                middle: …

我收到此错误：

尚未向该数组注册任何表单控件。如果您使用的是ngModel，则可能需要检查下一个刻度（例如，使用setTimeout）。

使用此代码时：

public settingsForm: FormGroup = this.fb.group({
  collaborators: this.fb.array([]),
  rsvp: this.fb.group({
    latestDate: ['', [Validators.required]],
    latestTime: ['', [Validators.required]],
    guestLimit: ['', [Validators.required]],
    isRSVPOpen: false,
    isGuestPlusOne: false,
    isAutoApproveToGuestlist: false,
    isOnlyFacebookRSVP: false,
    isBirthdayAndPhoneRequired: false
  }),
  tickets: this.fb.group({
    info: this.fb.group({
      closingDate: '',
      closingTime: ''
    }),
    types: this.fb.array([])
  })
});

内部ngOnInit：

this.eventSubscription = this.af.database.object('/events/' + this.eventId)
  .filter(event => event['$value'] !== null)
  .subscribe((event: IEvent) => {

    const settings: ISettings = event.settings;
    const collaborators: ICollaborator[] = settings.collaborators;
    const rsvp: IRSVP = settings.rsvp;
    const tickets: ITickets …

我正在尝试为具有嵌套属性的模型(FormArray)实现编辑表单.我的语法有问题,我不确定自己是否走在正确的轨道上.主表单的属性工作,它是我遇到问题的嵌套表单.这是我到目前为止所拥有的.

在这里,我启动表单组:

private initForm() {
  this.subscription = this.expenseService.getExpense(this.id)
    .subscribe(
      expense => {
        this.expense = expense;
        this.patchForm();
      }
    );
  this.expenseEditForm = this.fb.group({
    date: '',
    amount: '',
    check_number: '',
    debit: '',
    payee_id: '',
    notes: '',
    expense_expense_categories_attributes:[]
  });
}

在这里,我修补表单以设置从我的后端API检索的对象的值.

private patchForm() {
  this.expenseEditForm.setValue({
    date: '',
    amount: this.expense.amount_cents,
    check_number: this.expense.check_number,
    debit: this.expense.debit,
    payee_id: '',
    notes: this.expense.notes,
    expense_expense_categories_attributes:  this.fb.array([
      this.setExpenseCategories(),
    ])
  });
}

这就是我被困住的地方.如何推送FormArray.如果我尝试推送,我会收到一个错误,指出它在FormArray上不存在.

private setExpenseCategories() {
  for ( let expenseCategories of this.expense.expense_expense_categories){
    this.fb.array.push([
       this.fb.group({
        expense_category_id: [expenseCategories.expense_category_id, Validators.required],
        amount: [expenseCategories.amount_cents]
      ])
    });
  }
} …

我有一个关于将数组值设置为 formBuilder.array 的问题。在不是数组的 formBuilder 中，它可以使用这种方式来设置值，但在 formBuilder.array 中我不能这样做。我尝试为 formbuilder 'listServiceFeature' 和 'listservicefeature' 设置值，但无论如何都没有设置值。

ts

listServiceFeature: any = ['m1', 'm2']

contentFormValidate(): void {

  this.contentForm = this.formBuilder.group({
          'listservicefeature': this.formBuilder.array([
              this.formBuilder.group({
                 listServiceFeature: ['', [Validators.required]
              });
          ]),
  });

  this.contentForm.controls['listservicefeature'].setValue(this.listServiceFeature);
}


addServiceFeature() {
    const control = <FormArray>this.contentForm.controls['listservicefeature'];
    control.push(this.initServiceFeature());
}

removeServiceFeature(i: number) {
    const control = <FormArray>this.contentForm.controls['listservicefeature'];
    control.removeAt(i);
}

html

<div formArrayName="listservicefeature">
  <div class="form-group" *ngFor="let servicefeature of contentForm.controls.listservicefeature.controls; let i=index">
    <label for="Service">Features {{i+1}}</label>
    <div class="input-group" [formGroupName]="i">
        <input type="text" class="form-control" formControlName="listServiceFeature">
        <template [ngIf]="i == 0">
            <span class="input-group-btn">
            <button …

嗨我正在使用表单生成器在角度2中实现一个表单

在component.ts中,我使用formGroup实现了我的表单

以下是我的代码

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,
              private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address, [<any>Validators.required]],
      address2: ['', [<any>Validators.required]],
      city: ['', [<any>Validators.required]],
      company_address: ['', [<any>Validators.required]],
      company_address2: ['', [<any>Validators.required]],
      company_city: ['', [<any>Validators.required]],
      company_country: ['', [<any>Validators.required]],
      company: ['', [<any>Validators.required , Validators.minLength(3)] ],
      company_tax_number: ['', [<any>Validators.required]],
      company_zip: ['', [<any>Validators.required,  Validators.minLength(5) , Validators.maxLength(7)]],
      country: ['', [<any>Validators.required]],
      email: ['', [<any>Validators.required, Validators.email]],
      first_name: [this.userDetails.first_name, [<any>Validators.required]],
      id: ['', [<any>Validators.required]],
      last_name: ['', [<any>Validators.required]],
      phone: ['', [<any>Validators.required, Validators.minLength(10)]],
      zip: ['', [<any>Validators.required , …

我希望获得我的一个表单("系列")值,如果通过订阅更改但似乎有问题,因为我的控制台日志中没有任何内容.

import { Component , AfterViewInit } from '@angular/core';
import {FormGroup,FormBuilder} from '@angular/forms';
import {Observable} from 'rxjs/Rx';

@Component({
selector: 'app-root',
template: `<h1>Hello World!</h1>
            <form [formGroup]="frm1">
            <input type="text" formControlName="name" >
            <input type="text" formControlName="family">
            </form>
            `,

})

export class AppComponent implements AfterViewInit{ 

 frm1 : FormGroup;

constructor( fb:FormBuilder){
    this.frm1 = fb.group({
        name : [],
        family: []
    });     
}
ngAfterViewInit(){  
    var search = this.frm1.controls.family;
    search.valueChanges.subscribe( x => console.log(x));    
}
}

如何将多个验证器添加到FormGroup.

FormControl可以接受一组验证器,但FormGroup不能.除了创建单个自定义验证器之外,还有其他解决方法吗？

我正在使用rc4.

我有这样的反应形式:

constructor(...){
  this.form = this.formBuilder.group({
    name: ['', Validators.compose([Validators.required, Validators.maxLength(50)])],
    memes: this.formBuilder.array([
      this.initMemes('TrollFace')
    ])
  });
}

initMemes (name?) {
  return this.formBuilder.group({
    id: [''], name: [name]
  });
}

以后我可以添加更多memes:

addMemes () {
  const control = <FormArray>this.form.controls['memes'];
  control.push(this.initMemes('anyName'));
}

然后,如果我得到表格值我得到:

this.form.controls['memes'].value - 这里我有阵列

但是有一种情况,当我需要this.form.controls['memes'].value将它设置为空数组时,怎么可能呢？

如果我这样设置:

this.form.controls['memes'].setValue([])

我收到了错误: Must supply a value for form control at index: 0.

我做错了什么？