标签: angular-reactive-forms

如何正确地进行单元测试（Karma、Jasmine），即valueChanges发送FormUpdated动作的emmissions ？

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [...],
    providers: [
      { provide: Store, useValue: MOCK_STORE },
    ],
    declarations: [FormComponent],
    schemas: [NO_ERRORS_SCHEMA]
  })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(FormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

export class FormComponent implements OnInit {
    searchForm: FormGroup;

    constructor(private readonly fb: FormBuilder, private readonly store: Store<AppState>) {
    }

    ngOnInit(): void {
        this.searchForm = this.fb.group({});
        this.searchForm.valueChanges.subscribe(value => this.store.dispatch(new FormUpdated(value)));
    }
}

我试过这样的事情：

it('should dispatch action for valueChanges', () => {
    const spy …

我目前正在尝试完成 angulars 基础指南，并且我目前在响应式表单方面遇到了一些问题。

我的 HTML 中的第 4 行抛出此错误： ERROR TypeError: Cannot read property 'value' of undefined

组件.html：

<form [formGroup]="loginForm">
  <label>
    Username:
    <input type="text" formControlName="name">
  </label>
  <p>{{name.value}}</p>
  <label>
    adress:
    <input type="text" formControlName="adress">
  </label>
</form>

组件.ts：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(
    private formbuilder : FormBuilder
  ) { }

  loginForm …

是否可以使用自定义验证器将表单字段的输入与列表进行比较？我不想将两个表单控件相互比较。

我一直在尝试这种方法：

this.formGroupName = this.formBuilder.group({
    category: ['', Validators.compose([Validators.required, this.checkCategoryInput(
      this.formGroupName.get['category'].value, this.categoryList)])]
});

在该checkCategoryInput()方法中，我将“类别”表单控件的值与可接受类别列表进行比较。

public checkCategoryInput(input: string, categoryList: any[]): {[key: string]: boolean} | null{
  console.log(input);
  console.log(categoryList);
  return null;
}

但是，我在语法中迷失了方向，并在尝试使用这种方法时遇到了一些错误。有没有人有更好的方法将表单控件值与列表进行比较？？？

我正在使用反应式角度表单并创建了新的自定义表单验证器，但它没有显示自定义消息我想为自定义验证器添加自定义消息。

我试图忽略静态消息我希望将该消息添加到该验证器本身中，以便它可以在我使用该验证器的任何地方显示。

自定义验证器代码：

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

export function validateJson(input: FormControl): object | null {
    try {
        if (input.value) {
            JSON.parse(input.value);
        }

        return null;
    } catch (error) {
        return { invalidFormat: true };
    }
}

我的表单中有一个“mat-radio-group”，它有 2 个“mat-radio-button”，其值为“yes”和“no”。

我想根据用户的选择使用这些值来启用或禁用另一个输入字段（简单的 matInput）。

我还想默认禁用 matInput（在用户从无线电组中检查“是”或“否”之前）。

我正在使用 Angular 反应式表单，并为这些输入设置了表单控件名称。

假设 formGroup 名称是“myForm”。

以下是我在模板中的代码：

<mat-radio-group formControlName="myRadio">
          <mat-radio-button value="yes" required>Yes</mat-radio-button>
          <mat-radio-button value="no" required checked>No</mat-radio-button>
</mat-radio-group>

<mat-form-field>
          <input matInput formControlName="myInput" />
</mat-form-field>

使用 reference( /sf/ask/3513814321/) ，我在表单中有 20 个字段，如果用户单击重置选项，我需要重置表单排除 2 个字段，如果我使用 this.form.reset() 意味着它会重置每件事，任何帮助表示赞赏

我创建了带有文本输入的简单反应式表单，当提交表单时，我想传递来自文件输入的图像。每次我谷歌我得到教程，他们告诉我如何上传文件，但它是在没有其他输入字段的情况下完成的。我明白如何做到这一点，我不明白如何在一次提交中同时提交我的表单和文件输入。

在我的场景中，我不应该使用响应式表单，而是简单地new FormData()将每个输入附加到其中吗？

如果我能做到，请给我一个简单的例子。

编辑：如何在 Angular2 反应形式中包含文件上传控件？这不是答案。回答市场没有随反应形式一起发布文件，它是单独发布文件。

我正在尝试将电子邮件验证应用于 mat-chip。以下是我实现相同目标的尝试。

https://stackblitz.com/edit/mat-chip-demo-yvmxsk

我的要求是在用户输入无效的电子邮件 ID 时显示 mat-error 并仅突出显示无效的电子邮件 ID。有人可以帮助我吗？

我正在处理 angular 7 的反应式表单，我需要从表单外的按钮调用提交。

<input type="button" form="ngForm"  class='Button' value="Save" (click)="detailForm.ngSubmit.emit()" />

<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit()" >
</form>

此功能运行良好。

现在，我需要从多个按钮提交表单，即

• 如果用户单击“保存”按钮，则应提交表单并保存
• 如果用户单击更新按钮，则应提交并更新表单

为此，我想传递一个标志“保存”或“更新”

<input type="button" form="ngForm"  class='Button' value="Save" (click)="detailForm.ngSubmit.emit('Save')" />

<input type="button" form="ngForm"  class='Button' value="Update" (click)="detailForm.ngSubmit.emit('Update')" />

<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit(flag)" >
    </form>

但我无法提交带有“保存”/“更新”标志的表单。如何将表单外的 Save 和 Update 按钮中的参数传递给我的提交函数。

任何富有成效的建议将不胜感激。

编辑：用 Jojofoulk 的评论解决。

当使用 angular-material 的自动完成组件时，我试图使用setValue输入表单，但它的[matAutocomplete]属性阻止setValue在输入中显示。

检查反应式控件会发现该值是正确的，删除[matAutocomplete]它可以使其工作，但它只是没有显示出来。

<mat-list-item role="listitem" *ngFor="let skill of curObj.skills;index as ind">
  <div>
    <mat-form-field>
      <input type="text" placeholder="choose skill" aria-label="Number" matInput [formControl]="skill.control" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="optSel($event.option.value,skill)">
        <mat-option *ngFor="let option of skill.filteredOptions | async" [value]="option">
          {{option.name}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </div>
</mat-list-item>

skill.control.setValue("some new value");