标签: 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)

感谢您的任何帮助

我正在使用 @ngular/core 6.1.1 和 @angular/forms 6.1.1

我正在尝试编写一个 ControlValueAccessor 来管理一组值。

我正在使用反应式表单并像这样声明我的表单：

export class ItemsFormComponent implements ControlValueAccor, OnInit {

    public form: FormArray;

    public items: string[] = ['foo', 'bar', 'baz'];

    constructor(private formBuilder: FormBuilder) {
        this.form = this.formBuilder.array(this.items.map((item) => new FormControl(item)));

        this.form.valueChanges
            .debounceTime(200)
            .subscribe((items: string[]) => {
                this.onChangeFn(items);
            });
    }
}

但是，我收到了一个模板解析错误

<ol [formArray]="form">
    ...
</ol>

Can't bind to 'formArray' since it isn't a known property of 'ol'

我确实在我的功能模块中包含了 FormsModule 和 ReactiveFormsModule。基于 FormGroup 工作的任何其他表单。

如果我这样做，它有点工作，<ol [formGroup]="form">但它似乎是一个奇怪的黑客，并且验证似乎已损坏。而且我担心无论如何它都会在为产品构建时破裂。

那么有没有办法使用 FormArray 作为顶级表单呢？理想情况下，我想避免创建一个包含单个 FormArray 的 FormGroup。

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

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

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

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

1)示例 1
2)示例 2

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

这是Stakcblitz 演示。

如何在输入 FormControl 中显示一些不等于此 FormControl 值的文本？

例如，从服务器获取一些对象 - {id: 1, name: "Name1"}，并将valueFormControl 设置为该对象或 object.id 但display value设置为 object.name - "Name1"。

为什么我需要它：

我使用角材料自动完成并将 FormControl 的值设置为对象（来自选定的垫子选项）并通过 displayWith 将值显示为字符串。为了一些一致性和便利性，我想在从服务器获取数据时重复这种行为

我正在开发 Angular 应用程序，但在验证电子邮件和电话号码时遇到问题

问题

1. 对于电子邮件验证问题，当我在错误的电子邮件中输入 @ 并且没有输入 .com 或 .in 示例时 -：abcd@gm .. 它不显示错误消息，

2. 对于电话号码验证，仅当电话号码留空时才会显示错误消息，当我们输入电话号码并且超过最大长度或最小长度时，它不会显示任何错误消息。

组件.ts

import { Component, OnInit } from '@angular/core';
import { ServicesService } from '../service/services.service';
import { FormGroup  , FormControl  , Validators } from '@angular/forms';
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

 constructor( public restapi:ServicesService) {

    this.user = new FormGroup({

      email: new FormControl('', [Validators.required,Validators.email]),
      phone: new FormControl('', [Validators.required, Validators.minLength(10)]),
      password: new FormControl('', [Validators.required, Validators.minLength(6)])
      });

   }
ngOnInit() …

我正在创建带有验证的 Angular 6 表单。我只想在提交表单后显示错误消息。重要的事实是，在打字过程中消息不应该改变。因此，例如当用户没有在输入中输入任何内容然后提交表单时，应该会出现所需的消息。之后，当用户输入内容时，消息应该一直可见，直到下一次提交按钮按下。此外，当满足先前的规则时，错误消息不应更改为另一个。老实说，我不知道是否可以使用 Reactive Forms。

应用程序组件.html

<form [formGroup]="form" novalidate (ngSubmit)="submit()" #myform="ngForm">
    <input class="input" type="text" formControlName="firstName" />   
    <p *ngIf="form.get('firstName').hasError('required') && myform.submitted">
      Name is required
    </p>
    <p *ngIf="form.get('firstName').hasError('minlength') && myform.submitted">
      Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
    </p>
    <button type="submit">Submit</button>
</form> 

app.component.ts

export class AppComponent  {
  form: FormGroup
  constructor(private fb: FormBuilder,) {
      this.form = this.fb.group({
          firstName: ['', [Validators.required, Validators.minLength(5)]]
      });
  }

  submit() {
    console.log(this.form);
  }
}

演示：堆栈闪电战

谢谢你的帮助！