标签: angular2-formbuilder

我正在使用ReactiveFormsModuleAngular2来创建包含表单的组件.这是我的代码:

foo.component.ts

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'name': ['', Validators.required],
        'surname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html

<div class="two fields">
    <div class="four wide field">
        <label>Name*</label>
        <input type="text" [formControl]="myForm.controls.name"/>
    </div>

    <div class="four wide field">
        <label>Surname*</label>
        <input type="text" [formControl]="myForm.controls.surname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div> …

我正在使用model driven forms,我正在寻找一种更好的方法将数据绑定到相关的,formControlName因为我的表单上有超过25个字段,我不想为所有字段编写代码,因为我已经写了对于下面.

模板:

<input type="text"
       class="form-control"
       formControlName="firstName"
       name="firstName"
       placeholder="First Name"
       required>

组件:

this.refferalService.getReferringDataEdit(id).subscribe(
  result => {
    this.referringData = result.responseObject;
    this.refferalForm.patchValue({ 
      firstName: this.referringData.firstName 
    })
  }
)

有没有办法"自动"？

当我提交表格时,我有这个功能

login(form: NgForm)

如果我尝试以下

console.log(form.value.password); // this works perfect.

但这不起作用

form.value.password = ''

登录失败后,我想重置密码字段.

我正在为移动应用程序构建表单。

我有两组使用离子无线电的无线电组。一个选择鱼的性别，一个选择成功捕获后鱼的命运。我无法让这些无线电输入与 formBuilder 一起使用。

我在 CatchPage.html 中收到两条错误消息，分别是第 113 和 114 行。除了行号外，两者都是相同的，所以我只在这里放一个。

CatchesPage.html:113 ERROR Error: No value accessor for form control with name: 'catchSex'
    at _throwError (forms.es5.js:1830)
    at setUpControl (forms.es5.js:1740)
    at FormGroupDirective.addControl (forms.es5.js:4711)
    at FormControlName._setUpControl (forms.es5.js:5299)
    at FormControlName.ngOnChanges (forms.es5.js:5217)
    at checkAndUpdateDirectiveInline (core.es5.js:10790)
    at checkAndUpdateNodeInline (core.es5.js:12216)
    at checkAndUpdateNode (core.es5.js:12155)
    at debugCheckAndUpdateNode (core.es5.js:12858)
    at debugCheckDirectivesFn (core.es5.js:12799)

在这些错误之后我得到

ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'catchSex'
Error: No value accessor for form control with name: 'catchSex'
    at …

我使用angular 2 formbuilder来创建一个表单,我想根据无线电盒输入的变化有条件地验证输入字段.当我点击百分比单选框时,应该验证百分比输入.当我点击金额单选框时,它应该验证金额输入字段.

HTML代码

(我正在使用材料输入组件)

<md-radio-group formControlName="splitType" (click)="splitTypeClicked()">
      <md-radio-button value="amount">Amount</md-radio-button>
      <md-radio-button value="percentage">Percentage</md-radio-button>
</md-radio-group>

<input  mdInput  placeholder="Amount" formControlName="amount"  >
<input  mdInput   placeholder="Percentage" formControlName="percentage"  >

角度2分量

constructor(private fb: FormBuilder){}

  ngOnInit() {

    this.splitChargeForm = this.fb.group({
      splitType: ['', Validators.required],
      amount: [''],        //validate when splitType = amount
      percentage: ['']     //validate when splitType = percentage

   });

我有以下ngOnInit方法：

ngOnInit() {
    this.countries = this.sharedService.getCountries();
    this.shopService.getCurrentShopFromCache().then(shop => {
        this.shop = shop;
        this.myFormGroup = this.fb.group({
            name: [this.shop.name[this.shop.defaultLanguage.code], [Validators.required]],
            address: [this.shop.address.address],
            city: [this.shop.address.city],
            state: [this.shop.address.state],
            country: [this.shop.address.country, [Validators.required]],
            phone: [this.shop.phone],
            email: [this.shop.email],
            website: [this.shop.social.website],
            twitter: [this.shop.social.twitter],
            facebook: [this.shop.social.facebook],
            instagram: [this.shop.social.instagram],
            foursquare: [this.shop.social.foursquare]
        });
    }
    );
}

我越来越

formGroup expects a FormGroup instance. Please pass one in.

我哪里错了？

更新：

 <form *ngIf="shop" class="m-form m-form--fit m-form--label-align-right" [formGroup]="myFormGroup" novalidate>
                       ... 

我已经知道inputa 中的项目FormControl可以被标记dirt或touched通过调用以下任何方法（也许更多）： group.markAsTouched(); form.get('control-name').markAsTouched(); form.markAllAsTouched(); form.controls[someIndex].markAsTouched();

但是，我可以看到该markAsTouched方法似乎在输入focus为 then时被调用blur。

有没有办法通过代码达到相同的结果？比方说，当点击一个按钮时。

在这里，您可以看到当前标准行为的 gif，无需表单，您也可以在以下实时示例中自行测试：

https://stackblitz.com/edit/angular-peq11f

对我来说，很明显这种行为应该可以由代码触发，而不仅仅是在blur事件触发时触发

像这样的东西：

<input #myInput>
<button (click)="myInput.markAsTouched()">click</button>

我看到有一个主题看起来像我的，但它并没有真正回答我的问题，因为我们没有以相同的方式管理错误。不推荐使用 FormBuilder 组

首先，我刚刚迁移到 Angular 11，现在遇到了这个问题：

group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming.
Use the `FormBuilder#group` overload with `AbstractControlOptions` instead.

在此页面中，我会在页面上自动生成许多表单，在日期范围的情况下，我使用两个日期选择器。我创建了一个函数来检查 2 个日期选择器中的值。

成分：

newGroup = this.fb.group(
        {
          [node.type + '_' + node.objectId + '_dateFrom']: [
            '',
            [Validators.required]
          ],
          [node.type + '_' + node.objectId + '_dateTo']: [
            '',
            [Validators.required]
          ]
        },
        {
          validator: CheckFromToDate(
            node.type + '_' + node.objectId + '_dateFrom',
            node.type + '_' + node.objectId + '_dateTo'
          ) …

我正在使用"@angular/forms": "~2.1.0"and "angular-cli": "1.0.0-beta.19-3"并且在我进行异步调用以获取列表之后尝试设置my FormGroup(s campaignForm) campaign_config_id属性的默认值campaignConfigs.

我已经尝试使用以下其他SO建议,但我明白了TypeError: _this.campaignForm.controls.campaign_config_id.updateValue is not a function.

this.campaignConfigService.getCampaignConfigs()
  .subscribe(
    campaignConfigs => {
      ...
      this.campaignForm.controls['campaign_config_id'].updateValue(campaignConfigs[0].id)
    }
  );

我也试着铸造this.campaignForm.controls['campaign_config_id']成NgControl,FormControl,SelectControlValueAccessor和其他对象,但他们都没有的.updateValue功能.

关于如何做到这一点的任何建议？

如何在输入中显示转换后的值（例如“1(234)567-890”），而没有转换值（'1234567890'）？

是否可以为maskInputEl和制作单独的值maskInput？

我有模板：

   <input #maskInputEl class="spacer" [type]="type"
   [formControl]="maskInput"/>

和自定义组件：

export class MaskInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
    @ViewChild('maskInputEl') public maskInputEl: ElementRef;

    @Input() public mask: any[];

    public maskInput = new FormControl();

    private _oldValue: string = '';

    public ngOnInit(): void {
        this.maskInput.valueChanges
            .subscribe((value: string) => {
                    let valid = this.isValidValueByMask(value, this.mask);
                    if (valid) {
                        this._oldValue = value;
                    } else {
                        value = this._oldValue;
                    }

                    this._onChangeCallback(value);
                    this.onChange.emit(value);

                    this.maskInputEl.nativeElement.value = value; 
                },
                (err) => console.warn(err)
            );
    }

    public toggleActive(value) { …