标签: angular-reactive-forms

所以我正在创建一个验证器来检查用户名是否已被占用。

我有以下自定义验证器定义：

import { AbstractControl } from '@angular/forms';
import { AccountApi } from '../../api/service/account.api';
import { Injectable } from '@angular/core';
import { switchMap, mapTo, catchError } from 'rxjs/operators';
import { of, timer } from 'rxjs';


@Injectable()
export class UsernameValidator {
  constructor(private api: AccountApi) {

  }

  exists(control: AbstractControl) {
    // this.api.checkUsernameIfExisting(control.value).subscribe((existing) => {
    //   control.setErrors({ exists: existing });
    // });

    // return null;

    return timer(100).pipe(
      switchMap(() => this.api.checkUsernameIfExisting(control.value).pipe(
          // Successful response, set validator to null
          mapTo(null),
          // Set error object on …

场景：用户想要检索电子邮件或重置密码。人们将根据要求选择相应的选项。仅当表单有效时，提交按钮才会启用。

问题：我想根据所选选项动态更新验证。但它不起作用。我肯定错过了一些东西。我使用了clearValidators，但它也不起作用。这是 工作代码。

用于测试使用：电子邮件：test@test.com 密码：Test@1234

我有一个几乎没有控件的表单组，仅当至少一个字段具有值时才需要所有字段。即，任一用户都可以将所有字段保留为空或在所有字段中输入数据。每个控件都需要经过验证才能在其下方显示所需的错误。

我尝试在内置所需验证器的帮助下为此构建自定义验证器，但它仅验证当前控制。

allFieldRequired(ctrlName: string): ValidatorFn {
    return (ctrl: AbstractControl) => {
      if (!ctrl.parent || !Object.values(ctrl.parent.value).join('')) {
        return null;
      }
      return CustomValidators.required()(ctrl)
    }
  }

这是我的实现。

我的 Angular 形式有一个奇怪的问题。我有一个简单的表格，如下所示：

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <button (click)="addUser()">Add a user</button>

      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>

      <button>Submit</button>
</form>

问题是，当我ENTER在表单中按下when时，它不是提交，而是触发函数addUser()，这不是我想要的。

如何阻止它“点击”ADD A USER并触发addUser()？

我有一种User反应形式，我RxFormBuilder从@rxweb包中使用过，我有一个包含对象的用户模型类UserInfo，我如何将它用作嵌套formgroup？

模型.ts：

import {prop,propArray } from "@rxweb/reactive-form-validators"
export class UserInfo{
   @prop()
   cityId: number 

   @prop()
   countryId: number;
}

export class User{
 @prop()
 userId: string;

 @prop()
 password: string;

@prop()
securityQuestion: string;

 @prop()
 userInfo : UserInfo;

}

组件.ts：

export class UserInfoComponent implements OnInit {

    userInfoFormGroup: FormGroup

    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
        this.userInfoFormGroup = this.formBuilder.formGroup(User);
    }
}

我想UserInfo在用户模型中使用对象作为嵌套formgroup。如何创建嵌套formgroup？

这是一个 stackblitz 链接： https://stackblitz.com/edit/rxweb-nested-formgroup-using-model

我有这个表单字段：

    <mat-form-field>
        <input matInput type="password" placeholder="password" formControlName="password" autocomplete="new-password">

        <mat-hint align="end">Must have one letter, and one number</mat-hint>
        <mat-error *ngIf="password.invalid && password.touched" class="has-text-danger">
            That password sucks...
        </mat-error>

    </mat-form-field>

我想将它用作自定义组件，例如：

<password-form-field formControlName="password"></password-form-field>

在父组件中给出 formControlName。这样的事情可能吗？

这样做的原因是我想在许多其他组件中使用它。

我有一个输入，当用户单击对话框时将填充该输入。因此，为此我必须将其禁用，因为我不希望用户手动输入该值。唯一的问题是这个输入必须是必需的，而我到目前为止还做不到。

我尝试在输入中添加“required”指令，并尝试在创建表单时添加 Validator.required，但这些都没有成为表单所需的字段。

createUnityForm(): FormGroup {
    return this._formBuilder.group({
        id      : [this.unity.id],
        description: [this.unity.description],
        floor: [{value: this.unity.floor, disabled: true}, Validators.required]
    });
}

<mat-form-field appearance="outline" floatLabel="always" class="mr-16" fxFlex>
    <mat-label>{{'UNITY.FLOOR' | translate}}</mat-label>
    <input matInput placeholder="{{'UNITY.SELECT-FLOOR' | translate}}"
        name="floor"
        formControlName="floor"
        required>
</mat-form-field>

<button *ngIf="action === 'edit'"
    mat-button
    class="save-button"
    (click)="matDialogRef.close(['save',unityForm])"
    [disabled]="unityForm.invalid"
    aria-label="save">
        {{'GENERAL.SAVE' | translate}}
</button>

即使输入中没有任何内容，unityForm 也是有效的

我正在尝试将自定义验证器添加到我的 component.ts 中

自定义验证器文件：

import { FormGroup, ValidationErrors } from '@angular/forms';

export class ProfileCustomValidators {

    static validateTime(fg: FormGroup): ValidationErrors {
        const staffForm = fg.get('staffForm')
        const fromTime = staffForm.get('fromTime').value;
        const toTime = staffForm.get('toTime').value;
        if(fromTime > toTime) {
            return {
                'endTime': {
                    message: 'End time should be greater than start time'
                }
            }
        }
        return null;
    }
}

组件.ts

export class StaffFrom implements onInit {
staffForm: FormGroup;

constructor(private fb: FormBuilder){}


ngOnInit() {
  this.staffForm = this.fb.group({
      fromTime: new FormControl(null, Validators.required),
      toTime: new FormControl(null, …

我正在使用角反应形式，并且我的形式结构如下所示。

{  
   "name": '',  
   "params": {}  
}

我想在参数 formGroup 内添加动态属性（表单控件）。下面是我使用的代码，但它给出了空controls对象。

.ts 文件

exercise = {
    data:[
      {param: "Reps"},
      {param: "Tempo"}
    ],
};

{
   this.exerciseForm = this.formBuilder.group({
      name: ['', [Validators.required],
      params: this.formBuilder.group({})
   });
}

get getAllParams(){
  return this.exerciseForm.get('params') as FormGroup;
} 

addNewParam(){
  this.getAllParams[param] = this.formBuilder.control('');
}

模板文件

<div formGroupName="params" *ngFor="let param of exercise.data;">
    <input type="text" [formControlName]="param.param" />
</div>

谁能帮我创建相同的结构吗？

考虑带有输入的 Angular 反应形式。每当输入发生变化时，我们都希望保留其旧值并将其显示在某个地方。下面的代码按照显示的方式执行此操作：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Reactive Form';
  changedValue;
  oldValue;
  ooldValue;
  rform = new FormGroup({
    inputOne: new FormControl('chang me')
  });


  onOneChange(event) {
    this.changedValue = event.target.value;
    console.log('oneChanged', this.changedValue, 'old value is', this.oldValue);
    this.ooldValue = this.oldValue;
    setTimeout( ()=>this.oldValue = this.changedValue, 1);
  }
}

<form [formGroup]="rform">
    <label>
      One:
      <input formControlName="inputOne" (change)="onOneChange($event)"/>
    </label>
  </form>
  <p>
    changed value: {{changedValue}}
  </p>
  <p>
        old value: {{ooldValue}}
  </p>

正如您所看到的，它已通过在代码中保留三个变量来解决，这是不可取的（是的，changedValue可以删除该变量，但仍然有两个变量保留旧值很烦人，不是吗？）。

有没有办法用更少的变量重写代码？Angular 本身有下降的方式来做到这一点吗？

您可以在这里找到代码