标签: angular-forms

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

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

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

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

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

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

我正在使用模板驱动的表单方法。我想在ngModelGroup. 即，如果填写了一个字段，则还必须填写所有字段。

<form #f="ngForm">
      <div ngModelGroup="address">
        <input type="email" name="house_number" class="form-control" ngModel>
        <input type="email" name="street_number" class="form-control" ngModel>
      </div>
</form>

我在网上搜索，只找到这样的文章，这些文章只在输入级别而不是在ngModelGroup级别讨论自定义验证。其他文章讨论了我无法实现的反应式表单。

任何帮助将不胜感激。

我正在使用 Angular 表单，并且我想使用它们的内置更改检测在我的应用程序中实现一个功能。当用户单击按钮时，如果他/她对表单进行了任何更改，他/她应该只会看到一个对话框。

我有 changesMade 变量：

private changesMade: boolean;

这是我的形式的 TS 代码：

this.carForm = new FormGroup({
        name: new FormControl('', [
            Validators.required,
            Validators.pattern('[a-zA-Z ]*'),
            Validators.minLength(1),
            Validators.maxLength(10)
        ])});

这是我的表单的 HTML 代码：

<form [formGroup]="carForm">
        <ion-item>
          <ion-label  stacked>car name</ion-label>
          <ion-input type="text" [(ngModel)]="carname" formControlName="name"></ion-input>
        </ion-item>
</form>

这是我的模拟（目前）服务调用，在我设置了绑定到输入的 carname 的值后，我订阅了表单更改

setTimeout(()=>{
  this.carname = "BMW";
  this.carForm.valueChanges.subscribe(val => {
  this.changesMade = true;
    });
}, 44)

这里的问题是，即使我没有接触过表单，this.changesMade 也会被设置为 true。

注意：如果我在 ngAfterViewInit 中移动代码的 subscribe 部分，它仍然将 changesMade 设置为 true，即使我没有触摸输入：

  ngOnInit(){
    //simulated server call
    setTimeout(()=>{
      this.carname = "BMW";

    }, 44)
  }
      ngAfterViewInit(){ …

问题陈述：我正在实施 Angular 材料mat-form-field属性。我将表单字段外观作为大纲。我试图在选择输入时更改输入边框的颜色。

预期行为。选择输入时，输入字段轮廓边框颜色应更改。当表单域处于活动状态时，我想将轮廓的颜色更改为黑色。

当前行为：现在，当表单字段处于活动状态时，它会显示角度材料默认原色。

这都是我的依赖

{
  "dependencies": {
    "@angular/animations": "^6.1.9",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "aws-amplify": "^1.1.6",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.3",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0", …

我试图在我的 angular 项目中嵌套多个反应形式，并且形式在不同的组件中。

例如，我有一个组件，其中包含一个具有两个输入的表单，一个是名称输入，一个是描述输入和一个提交按钮。我称这个组件NameDescComponent

我计划在多个页面和表单中使用这个组件。这是组件的 html。

<form [formGroup]="nameDescForm" (ngSubmit)="customEmit()">
    <div fxLayout="row" fxLayoutGap="10px" fxFlex>
      <mat-form-field>
        <input matInput placeholder="Name" formControlName="name">
      </mat-form-field>
      <mat-form-field fxFlex>
        <input matInput placeholder="Description" formControlName="description">
      </mat-form-field>
    </div>
    <div fxLayout="column" fxLayoutGap="10px">
      <button type="submit" mat-raised-button color="primary">
        {{buttonText}}
      </button>
      <div>
      </div>
    </div>
  </form>

这是缩写的 ts 文件

public nameDescForm: FormGroup;



@Input() public buttonText: string;
  @Output() public save: EventEmitter<any> = new EventEmitter<any>();
  @Output() public nameDescFormEmit: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

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

  public ngOnInit() …

我在我的应用程序中使用模板驱动的表单。当我提交表格时，我有使用reset方法。
我找到了另一种formReset()方法，我已经检查过method它们的工作方式是否相同
对于 Angular 最佳实践，哪个method有用？如何？

我有以下表格，其中列出了问题并有一个答案字段。api 循环列出的问题，所有问题都需要具有相同的字段名称。一切正常，问题是我无法提交除最后一个之外的所有表单值。有没有办法为多个字段使用表单控件名称。

move-maker-add-component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { ApiService } from 'src/app/shared/services/api.service';
import { AuthService } from "src/app/shared/services/auth.service";
import { Router } from '@angular/router';
@Component({
  selector: 'app-move-makers-add',
  templateUrl: './move-makers-add.component.html',
  styleUrls: ['./move-makers-add.component.scss']
})
export class MoveMakersAddComponent implements OnInit {
moveMakerForm: FormGroup;
moveMakerId:any;
moveMakers:any='';
answer:any;
id:string='';


  constructor(public authService: AuthService,private router: Router, private api: ApiService, private formBuilder: FormBuilder) { }

  ngOnInit() {
  this.getMoveMaker();  
  this.moveMakerForm = this.formBuilder.group({
    'moveMakerId' : …

我想向表单添加自定义验证器，以防止 mat-step 切换到下一步。当我使用 FormGroups 时一切正常，但是当我必须使用 FormArray 时我无法实现验证。

我已经尝试了至少两种在表单初始化时分配验证器的变体：

• 数组内部

statuses: this._formBuilder.array([this.createStatus()], defaultStatusValidator())

• 数组的父形式内部

this.productionLineStatuses = this._formBuilder.group({statuses: this._formBuilder.array([this.createStatus()])}, {validator: defaultStatusValidator()});

但是这种尝试会导致错误（可能是在铸造验证器时）：

TypeError: Cannot convert undefined or null to object 
    at Function.keys (<anonymous>)
    at FormGroup.validate [as validator] (default-status.directive.ts:6)
    at FormGroup._runValidator (forms.js:3438)
    at FormGroup.updateValueAndValidity (forms.js:3399)
    at new FormGroup (forms.js:4097)
    at FormBuilder.group (forms.js:7578)
    at CreateProductionLineComponent.ngOnInit (create-production-line.component.ts:31)

在以下情况下不会抛出错误，但验证器也不起作用。这是我的其余代码和我的自定义验证器：

TypeError: Cannot convert undefined or null to object 
    at Function.keys (<anonymous>)
    at FormGroup.validate [as validator] (default-status.directive.ts:6)
    at FormGroup._runValidator (forms.js:3438)
    at FormGroup.updateValueAndValidity (forms.js:3399)
    at new FormGroup (forms.js:4097)
    at …

这是简单的自定义表单控件

@Component({
  selector: 'app-custom-control',
  template: `
    {{ value }}
    <input [ngModel]="value" (ngModelChange)="onChange($event)">
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomControlComponent),
    multi: true,
  }]
})
export class CustomControlComponent implements ControlValueAccessor {

  private value: any;

  private onChange: (val) => void;
  private onTouch: () => void;

  writeValue(value: any) {
    this.value = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouch = fn;
  }
}

使用如下：

@Component({
  selector: 'my-app',
  template: `
    <app-custom-control
      [ngModel]="model"
      (ngModelChange)="onChange($event)">
    </app-custom-control>
    <input [ngModel]="model" …

我有一个小问题，也许有人可以提供帮助，因为我已经为此工作了一个多小时......

在我的组件文件中，我使用一种方法创建了一个表单，然后我使用另一种方法进行 API 调用，返回一些数据并设置所创建数组的一个控件。下面是我的一些简单的代码，只是ngOnInit， constructor 和相关方法

constructor(public dialogRef: MatDialogRef<EditAccountComponent>,
          @Inject(MAT_DIALOG_DATA) private data,
          private apiService: ApiService,
          private emailUniqueValidator: EmailUniqueValidator) {
            this.user = data;
}

ngOnInit(): void {
    this.editAccountForm = this.createEditUserForm();
    this.getRoles();
}

createEditUserForm(): FormGroup {
    return new FormGroup({
        name: new FormControl(this.user.name, [Validators.required, Validators.max(50)]),
        email: new FormControl(
        this.user.emailAddress,
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
        ),
        companies: new FormControl(this.user.tags.company),
        roles: new FormArray([])
    });
}

getRoles(): any {
        this.apiService.getUserRoles(this.data.id).subscribe(roles => {
        // roles = ['role 1', 'role 2', 'role 3'];
        this.editAccountForm.controls['roles'].setValue(roles);
    });
}

在我的createEditUserForm …