标签: angular-forms

我正在使用 TypeScript 学习 Angular 5。我对此完全陌生。我现在正在尝试构建一个表单并验证它。但它无法正常工作。

这是我的组件：

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

    loginForm: FormGroup;

    errors = [];

    constructor(private fb: FormBuilder, public router: Router, private globals: GlobalsService, private http: Http) {

    }

    ngOnInit() {
        this.loginForm = new FormGroup({
            email: new FormControl("", Validators.required),
            password: new FormControl("")
        });
    }

    onLoggedin(formData) {
        
        alert("Submit form");
  
  
    }

}

如您所见，我在电子邮件字段上设置“必需”验证属性。这是我的html。

<div class="login-page" [@routerTransition]>
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <img src="assets/images/logo.png" width="150px" class="user-avatar" />
            <h1>Yo Cash Flow</h1>
            <div …

在构造函数中添加表单构建器时。我一直收到错误。我已经在 app.module 中添加了 ReactiveFormsModule 。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
    selector: 'app',
    template: require('./app.component.pug'),
    styles: [require('./app.component.scss')]
})
export class AppComponent {
    private loginForm: FormGroup;
    constructor(private fb: FormBuilder) {}
}

示例 app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
    imports: [BrowserModule, ReactiveFormsModule],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
})

这是错误：

1. 我有一个ImageHandler实现ControlValueAccessor.
2. ImageHandler应该在另一个组件中动态生成，并且视图将被嵌入。输入和输出可以毫无问题地设置。但如何应用formControl到嵌入的视图或组件上。

<image-handler [formControl]='fControl'></image-handler>

主要问题是这个 formControl 必须应用于图像处理程序本身，否则它可以通过作为fControl输入传递并在ImageHandlerComponent.

当前的解决方法：创建一个WrapperComponentforImageHandler或任何其他类似的组件。这些基于参数的包装器显示带有表单控件的特定元素。 <image-handler *ngIf='isImagehandler' [formControl]='fControl'></image-handler> ...

这个包装组件可以动态创建，没有任何问题。但这似乎不是一个真正的解决方案。

我正在阅读https://angular.io/guide/forms。

我的代码：

  <!-- Min price -->
  <div class="form-group">
    <label for="minprice">Min price</label>
    <input type="number"
           min="0"
           class="form-control" id="minprice"
           required
           [(ngModel)]="model.minprice" name="minprice"
           #minprice="ngModel">
    <div [hidden]="minprice.valid"
         class="alert alert-danger">
      Min price is required
    </div>
  </div>

  <!-- Max price -->
  <div class="form-group">
    <label for="maxprice">Min price</label>
    <input type="number" class="form-control" id="maxprice"
           required
           min="0"
           [(ngModel)]="model.maxprice" name="maxprice"
           #maxprice="ngModel">
    <div [hidden]="maxprice.valid"
         class="alert alert-danger">
      Max price is required
    </div>
  </div>

我有两个问题：

1、min="0"好像不行。当我输入时-1，没有显示错误消息。

2、如何验证minprice小于maxprice？

欢迎任何提示。谢谢

我的网站上有一个表格（人名、姓氏、出生日期、性别、公民身份等）。我的问题是我如何观察整个形式的变化并从观察中得到两件事：

• formControl 及其当前状态

• 处理的 formControl 的当前值

  前缀 {{availablePrefix}}

        <div class="col">
          <label for="firstName">First Name<span style="color: red"> *</span> </label>
          <input formControlName="party.firstName" type="text" autocomplete="off" id="firstName"/>
        </div>
  
        <div class="col">
          <label for="middleName">Middle Name</label>
          <input formControlName="party.middleName" type="text" autocomplete="off" id="middleName" maxlength="1" />
        </div>
  
        <div class="col">
          <label for="lastName">Last Name<span style="color: red"> *</span> </label>
          <input formControlName="party.lastName" type="text" autocomplete="off" id="lastName"/>
        </div>
  
        <div class="col">
          <label for="suffix">Suffix</label>
          <select formControlName="party.suffix" id="suffix">
            <option [value]="availableSuffix" *ngFor="let availableSuffix of availableSuffixes">{{availableSuffix}}
            </option>
          </select>
        </div>
      </div>
    </form>
  

  Run Code Online (Sandbox Code Playgroud)

感谢您的任何帮助

在我的 Angular 应用程序中，我通过实现ControlValueAccessor接口创建了一个自定义表单元素。

因此，在我的组件中，我正确实现了该接口的所有方法，包括setDisabledState：

/**
 * This function is called when the control status changes to or from "disabled".
 * Depending on the value, it will enable or disable the appropriate DOM element.
 *
 * @param isDisabled
 */
setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

一切正常。

问题是当我将组件的ChangeDetectionStrategy更改为OnPush.

通过这样做，我的组件的启用/禁用功能被破坏了。

我在包装 mat-select 的自定义组件上使用 formControlName 时遇到很多问题。

现在看来我的自定义控件找不到表单组？即使自定义元素嵌套在 formGroup 下。

我有一个StackBlitz

但是当我将自定义组件嵌套在 formGroup 下时，问题就出现了，所有其他控件都可以找到 formGroup 但我的自定义组件似乎无法找到。

<form novalidate [formGroup]="tenantForm">
    <label for="Id">Id</label>: <input class="form-control" formControlName="id" id="Id" name="Id" />
    <custom-component-with-mat-select formControlName="culture" id="Culture" name="Culture"></custom-component-with-mat-select>
</form>

在这个例子中，Id 字段可以正常工作，但是 Culture 字段抱怨没有嵌套在 FormGroup 中？

错误：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将其传递给现有的 FormGroup 实例（您可以在类中创建一个）。

自定义组件应该如何与响应式表单和表单组一起使用？

我最初的问题是不记得导入 ReactiveFormsModule .. 也许我忘记再次导入某些东西？

这个答案是实现这一目标的设计方法吗？或者我错过了一个更简单的解决方案？

我需要实现一个控制值访问器吗？？正如这里所解释的

只是对设计的方式感到困惑。

我的组件包装了 angular material 的 mat-select，如果我需要在 mat-select 上放置属性或让我的组件实现控制值访问器，我想我也很困惑？似乎没有任何效果。

我有一个名为 的组件demo，演示组件有 3 个输入字段和一个按钮。像这样：

单击按钮（即提交）后，我导航到另一个名为 的组件home。这个场景对我来说效果很好，但我添加了一些对名字/姓氏和电子邮件的验证。

如果用户输入所有必需的输入字段，则只有它才能导航到另一个组件（即主页）。但它在没有输入/验证所需输入字段的情况下进行导航。

在冲浪时我得到了一些例子：

1)示例 1
2)示例 2

但这些都是为了template-driven forms. 我正在使用反应形式。

这是Stakcblitz 演示。

我需要首先调用 API 获取表单中的一些值，然后提交它。我喜欢避免使用带有隐藏输入的表单，并希望即时创建它。我的伪代码

submitMyform() {
  //first i call an API and get some data
  var mydata = this.http.get()...

 this.signForm = new FormGroup({
  'Name': new FormControl(mydata.name),
  'Age': new FormControl(mydata.age)   
 });

  this.signForm.submit() //Wished this method existed
}

我希望我的浏览器重定向到我提交表单的页面。

编辑：对不起..！我主要关心的是如何提交此表格。不是获取数据并填充表单。我的代码只是一个模板..这是我缺少的 this.signForm.submit() 方法

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

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

  registerationForm: FormGroup = new FormGroup({});
  constructor() { }

  ngOnInit() {
    this.registerationForm = new FormGroup({
      userName : new FormControl(null, Validators.required),
      email : new FormControl(null, [Validators.required, Validators.email]),
      password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
      confirmPassword : new FormControl(null, [Validators.required]),
      mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
    }, this.passwordMatchingValidatior);
  }
  passwordMatchingValidatior(fg: FormGroup): Validators{
    return this.registerationForm.get('password').value === …