标签: angular-reactive-forms

我遇到的问题是表单显示输入字段错误。我不知道它为什么显示，可能是由于缺乏理解。所以我有一个叫做编辑团队的组件。在这个编辑团队组件中，我有一个输入字段，其值设置为当前团队名称。如果我将焦点放在输入文本字段上，然后移除焦点以让我们说背景，那么即使值预设且未更改，表单也会触发“必需”错误。

<div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input tabindex="0" type="text" placeholder="Please enter the team name" title="Please enter the team name" required value=""
               id="name" class="form-control" name="name" formControlName="name" [value]="nameValue">

    // This is the condition for when the error is shown. 
    // So when the input field is touched, check if an error 
    // exists for the validator required. 
    <div class='form-text error' *ngIf="editTeamFormGroup.controls.name.touched">
        <div *ngIf="editTeamFormGroup.controls.name.hasError('required')" class="help-block error small">Team name is required.</div>
    </div>
</div>

这是组件的构造函数和 ngOnIt 方法。订阅用于团队服务中的可观察对象，当团队更改时，值也会更改。

constructor(private fb: FormBuilder,
              private teamService: TeamService,
              private router: …

我正在尝试构建一个能够生成给定副本的函数FormGroup.我开始时:

function copyForm(form: FormGroup): FormGroup {
  const copy = new FormGroup({});
  for (let key of Object.keys(form.value)) {
    const control = form.controls[key];

    /* Copy the data from the control into a new control */
    const copyControl = new FormControl({[key]: control.value});

    copy.addControl(key, copyControl);
 }

但如果有一个FormArray或那个,这不起作用FormGroup.如果它是递归的,这个可能会起作用,但我无法很好地处理它.

我也试图解决它

function copyForm(form: FormGroup): FormGroup {
  const copy = new FormGroup({});
  for (let key of Object.keys(form.value)) {
    const control = form.controls[key];
    const copyControl = new FormControl({...control.value});
    copy.addControl(key, …

我有这些领域：

field1
field2
field3
field4

this.form = this.formbuilder.group({
  'field1' = ['', [<control-specific-validations>]],
  'field2' = ['', [<control-specific-validations>]]
 }, { validator: isField1GreaterThanField2Validator}
 });

我需要更多验证：

- field3.value must be greater than field4.value
- field3.value must be greater  than field2.value + 1
- field4.value must be less than field1.value

您如何将这些新的验证要求集成到构建的表单中？

我确实不希望做的是建立一个

formControl.valueChanges.subscribe(value => { });

对于每个字段，然后在那里有很多 if/else。

然后我可以删除整个反应式表单模块，使用 2way-databinding 并在验证表达式为真时在 ui 中呈现错误字符串。

我正在尝试使用Angular ReactiveForms生成动态表单.目前我收到错误Cannot find control with path 'myFormArray -> [index] -> myProperty.我已经检查了一些在互联网上找到的答案但没有成功.这是我的代码:

HTML:

<form [formGroup]="myForm">
    <div formArrayName="myFormArray" *ngFor="let ctrl of foo.controls; let i=index">
        <div [formGroupName]="i">
            <input matInput type="text" formControlName="myProperty">
        </div>
    </div>
</form>

TS:

export class MyClass implements OnChanges {

  @Input() myData: any;

  myForm: FormGroup;

  get foo(): FormArray{
    return <FormArray>this.myForm.get('myFormArray');
  }

  constructor(private fb: FormBuilder) { }

  ngOnChanges() {
    if (!this.myForm) {
      this.myForm = this.fb.group({
        myFormArray: this.fb.array([this.buildMyFormArray()])
      });
    }

    this.myForm.setControl('myFormArray', this.fb.array(myData || []));
  }

  buildMyFormArray(): FormGroup {
    return this.fb.group({
      myProperty: '' …

我正在用 Angular 构建一个反应式表单，我显然有一个“提交”按钮类型。我还有其他按钮元素。但我不希望这些按钮提交表单。我怎样才能做到这一点？我认为如果按钮元素上没有“type='submit'”属性，则表单未提交，但情况似乎并非如此。

谢谢

我有2个输入字段:名称和姓氏.我有2个按钮:提交和'添加一个人'.单击"添加人"应添加一组新字段(名称和姓氏).怎么实现呢？我找到了如何动态添加单个输入字段的解决方案,但在这里我需要添加一个集合

我的代码现在没有"添加人"功能:

import { FormControl, FormGroup, Validators } from '@angular/forms';
export class AppComponent implements OnInit {
   form: FormGroup;
   constructor(){}
   ngOnInit(){
     this.form = new FormGroup({
       name: new FormControl('', [Validators.required, Validators.minLength(2)]),
       lname: new FormControl('', [Validators.required, Validators.minLength(2)])
     });
   }
 ....
 }

模板:

<form [formGroup]="form" (ngSubmit)="submit()">
    Name: <input type="text" formControlName="name">
    Last Name: <input type="text" formControlName="lname">
    <button type="button">Add a Person</button>
    <button type="submit">Submit</button>
</form>

我有一个注册活动的表格，我要求提供日期、时间以及它是否重复发生（每天、每周、每月或根本没有）。

我还为用户设置了另一个输入，以指定该循环何时结束。问题是有两种方法可以“结束这种重复”。我有一个“重复次数”（如果你想每周重复那个事件两周），但我也有一个datepicker如果你想指定结束日期（即你希望它每天重复到 9 月 1 日） .

当一个输入的值发生变化时，我会触发一个函数来更新另一个，因此它保持一致

例如，如果我指定我希望它每天重复并设置 5 次，那么我的日期选择器将显示距原始日期 5 天的日期，反之亦然。

问题是，由于我有一个监听器来监听两个输入的变化，当用户更改一个时，我会更改另一个输入的值（以编程方式）并触发该valueChanges输入的值，因此它会不断来回.

在所有这些介绍之后，您有什么建议可以区分“用户制作”的更改和我所做的更改inputValueChanges吗？

我创建了一个类，其中包含我的应用程序的所有自定义验证。只是想知道这是否是正确的方法。我在网上看到了一些例子并想出了这段代码。每个方法都必须是静态的吗？如果我删除静态密钥工作，我会收到编译错误。

import { FormControl, ValidatorFn } from '@angular/forms';

export class FormValidator {

     static validategreater(maxVal, minVal): ValidatorFn {
    return (control: FormControl) => {
      if (control.dirty) {

          if (enteredValue > maxVal) {
            returnObj['greaterError'] = true;
          }
       if (Object.keys(returnObj).length > 0) {
          return returnObj;
        }
      }
      return null;
    };
  }

}

我为电话字段编写了一个自定义验证器并收到
错误

预期验证器返回 Promise 或 Observable。

为简单起见，我只需要检查电话号码是否少于 10 个字符

html

<div class="form-group col-xs-3 col-md-3"
                                       [ngClass]="{
                                     'has-error':(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     !ersaForm.get('phone').valid
                                     }">

                                    <label for="phoneId" class="control-label">Phone</label><br />
                                    <p-inputMask mask="(999) 999-9999" formControlName="phone"  inputStyleClass="form-control" [style]="{'width': '100%','height':'34px'}"  id="phoneId"  placeholder="Phone (required)"></p-inputMask>
                                    <span class="help-block" *ngIf="(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     ersaForm.get('phone').errors">
                                        <span *ngIf="ersaForm.get('phone').errors.phonePBXCheck">
                                            invalivd Phone Number.
                                        </span>

                                    </span>

                                </div>

TS

function phoneCheck(phone: string): ValidatorFn{
    return (c: AbstractControl): { [key: string]: boolean } | null => {

       var phoneVal = c.value;
            phoneVal = phoneVal.replace('(', '');
            phoneVal = phoneVal.replace(')', …

我正在使用反应式表单，当我为复选框分配 [ngModelOptions]="{standalone: true}" 时，它默认检查所有复选框。

以下是我的输入：

<input value="{{role.roleName}}" [(ngModel)]="role.roleId" [ngModelOptions]="{standalone: true}" type="checkbox" (change)="validateUserRole(role, $event,role.roleName)" [checked]="role.checked">

另外，尝试使用name属性。