标签: angular-forms

我在 Angular 2 中创建表单时遇到问题。我需要提交一些由服务动态生成的值。使用 Angular 的 http 模块，我得到一个价格，然后用户现在可以确切地知道多少比特币是 X 数量的智利比索。我要做的是提交所有这些数据。我不能这样做，因为角度表单没有提交禁用/只读输入。这些输入是汇率和目标金额（相当于 btc）。

我尝试了模板驱动的方法和数据驱动的方法，但没有成功。我什至无法在控制台中记录这些值。如果我从输入中删除 disabled 或 readonly 属性，则这些值会记录在控制台中并提交到我的数据库。

感谢您抽出时间帮助我。这是我的代码：

组件.ts

import { Component, OnInit } from '@angular/core';
import { SurbtcService } from '../services/exchange/surbtc.service';
import { FormBuilder, FormGroup, Validators, FormControl, NgForm } from "@angular/forms";
import { FiredbService } from '../services/firedb.service';
import * as firebase from 'firebase/app';

@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent {

  //myForm2: FormGroup;
  //error = false;
  //errorMessage = '';

  constructor(private surbtcService: SurbtcService, private fb: FormBuilder, private dbfr: FiredbService) …

我正在创建一个表单，根据先前的条件（例如复选框），应该/不应该需要输入字段。

如果该required属性设置为元素，则所需的验证工作正常。如果我required用 [attr.required]="CONDITION"设置 属性，它根本不会检查它。

这里是一个plnkr样品：https://plnkr.co/edit/vPfmgvLxUjNyNXHtkY24 （基于关于英雄例如从文档）。

代码（相关部分）：

  <form #heroForm="ngForm">  
      <div class="form-group">
        <label for="name">Required label Test</label>
        <input type="checkbox" class="form-control" [(ngModel)]="cbReqired" name="cbReqired" id="cbReqired">
      </div>

      <div [hidden]="!cbReqired">Now the Textbox should be required! (<code>required="true"</code> is set!)</div>

      <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" [attr.required]="cbReqired" [(ngModel)]="hero" #name="ngModel">

        <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">

          <div *ngIf="name.errors.required">
            Name is required.
          </div>
        </div>
      </div>

      <button type="submit" class="btn btn-default" [disabled]="heroForm.invalid">Submit</button>
      <button type="button" class="btn btn-default" (click)="heroForm.resetForm({})">Reset</button>
  </form>

我是Angular的新手,我有一个Reactive Forms, AbstractControl可以订阅valueChange监听输入字段中的任何值更改.在订阅函数内部,我想在一定条件下更改输入的值.

this.abstractControl.valueChanges.subscribe(data => {
...
   if(.....) {
       this.formGroup.patchValue({
           name: result
       )}
    }
...
}

我也尝试过使用this.abstractControl.setValue(result)不起作用.

设置值时出错.

ERROR RangeError: Maximum call stack size exceeded

听取价值变化并根据条件改变价值的推荐方法是什么？

我的预期结果是在提交表单后重置表单并将其默认值设置为绑定到 formGroup 控件。我试图在提交后通过在表单提交上调用 reset() 将表单重置为其默认数据。请告诉我如何重置日期和时间字段中的默认值。

例子 ：

pickupDate = new Date().toISOString().slice(0,10);
pickupTime = moment().format() ;

onSubmit(orderData: Order){
        this.apiService(orderData).subscribe( order => {
                 orderForm.reset()
})
}

请帮忙谢谢

当我尝试在我的 Angular 6 应用程序中的 formGroup 上使用 disable 方法时，我在浏览器控制台中收到此错误：

类型错误：this.personForm.disable 不是函数

尽管文档中提到了该方法，并且VS Code 甚至在此快照中建议了该方法。

我的代码在这里：

// ... many parts skipped, the form here is template driven 
// but still personForm is a FormGroup , 
// I am trying to disable the whole FormGroup with all child elements
@ViewChild('personForm') personForm: FormGroup;

        if (true) {
       // if I console.log here the form, I can see it is created already
         console.log(this.personForm);              
// output of console.log is 
// NgForm {submitted: false, …

我正在使用Angular5，并且有一个字段列表，每个字段都有一个名称和FormControl。我尝试使用此代码将控件动态添加到组中，但出现错误。

const formControlFields = [
  {name: 'field1',control: [null, []] as FormControl},
  {name: 'field2',control: [null, []] as FormControl}
];

const formGroup: FormGroup = new FormGroup({});
formControlFields.forEach( f =>  formGroup.addControl(f.name,f.control));
this.form = new FormGroup({groups:formGroup});

这是我得到的错误：

错误TypeError：control.setParent不是函数

at FormGroup.registerControl (forms.js:4352)
at FormGroup.addControl (forms.js:4372)
at eval (trade-search.component.ts:142)

Run Code Online (Sandbox Code Playgroud)

我需要使用反应式 angular 4+ 检查密码和确认密码字段是否具有相同的值。我确实在这里看到了很多相同的答案，Angular 4 表单验证重复密码，将验证器中的字段与 angular 4 进行比较，但似乎没有一个对我有用。

面对问题，如何在反应式方法中结合确认电子邮件和确认密码验证器。

确认电子邮件或确认密码工作正常。

   this.addEmpForm = new FormGroup({
      'name': new FormControl(null, Validators.required),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'cemail': new FormControl(null, [Validators.required, Validators.email]),
      'password': new FormControl(null, Validators.required),
      'cpassword': new FormControl(null, Validators.required)
    }, this.pwdMatchValidator);
  }

  emailMatchValidator(frm: FormGroup) {
    return frm.get('password').value === frm.get('cpassword').value
      ? null : { 'mismatch': true };
  }

  pwdMatchValidator(frm: FormGroup) {
    return frm.get('password').value === frm.get('cpassword').value
      ? null : { 'mismatch': true };
  }

HTML

<span class="help-block" 
              *ngIf="addEmpForm.get('cemail').touched && cemail?.errors || 
              addEmpForm.get('cemail').touched && addEmpForm.errors?.mismatch"> …

例如我有下面的表格。

searchForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  })

问题是，当我使用searchForm.reset()初始值设置为null而不是空字符串时''，我在FormControl.

我试过做下面的代码并且它有效。问题是，例如我有 20 FormControl，我需要全部输入并初始化它.reset({firstName:'', other20properties..})

this.searchForm.reset(
      {
        firstName: '',
        lastName: ''
      }
    );

有没有办法重置表单并将其所有初始值设置为空字符串''。

我有一个带有 FormArray 的 FormGroup 和一个显示数组的 mat-table。当我向 FormArray 添加新的 FormGroup 时，mat-table 不会添加新行。

我试图给 trackBy 做广告，但我不知道在哪里（老实说，也不知道为什么）。

组件.html：

<form [formGroup]="formGroup">
    <div formArrayName="items">
        <button mat-raised-button (click)="addNew()">New Case</button>

        <table mat-table [dataSource]="items.controls">
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

            <ng-container matColumnDef="itemKey">
                <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
                <mat-cell *matCellDef="let item; let i = index" [formGroupName]="i">
                    <mat-form-field> 
                        <input formControlName="itemKey" matInput />
                    </mat-form-field>
                </mat-cell>
            </ng-container>

和 component.ts：

formGroup = new FormGroup({
   items: new FormArray()
});

get items() { return this.formGroup.get("items") as FormArray }


addNew() {
  this.items.push(new FormGroup({
    itemKey: new FormControl(), …

我正在我的 Angular 应用程序中使用 FormArray 构建一个表单：

public form = new FormGroup({
   experiences: new FormArray([])
});

用户可以向阵列添加体验：

addExperience(lotsOfVars) {
   const formGroup = new FormGroup({ /* creating a formgroup*/})
   (<FormArray> this.form.get('experiences')).push(formGroup);
}

一项新要求是允许用户更改先前输入体验的顺序：

问题：这是如何最好地实施的？

预期结果（类似）：

moveUp(i: number) {
  (<FormArray> this.form.controls['experiences']).at(i).moveUp()
}