标签: angular-forms

我想在angular2项目中使用角度材质自动完成组件.我在模板中添加了以下内容.

<md-input-container>
    <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let state of filteredStates | async" [value]="state">
        {{ state }}
    </md-option>
</md-autocomplete>

以下是我的组件.

import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {FormControl} from "@angular/forms";

@Component({
    templateUrl: './edit_item.component.html',
    styleUrls: ['./edit_item.component.scss']
})
export class EditItemComponent implements OnInit {
    stateCtrl: FormControl;
    states = [....some data....];

    constructor(private route: ActivatedRoute, private router: Router) {
        this.stateCtrl = new FormControl();
        this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name => this.filterStates(name));
    }
    ngOnInit(): void {
    }
    filterStates(val: …

我从Angular 2收到此错误

core.umd.js:5995 EXCEPTION:未捕获(在承诺中):错误:app/model_exposure_currencies/model_exposure_currencies.component.html:57:18中的错误:如果在表单标记中使用了ngModel,则name属性必须为set或表单控件必须在ngModelOptions中定义为"standalone".

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
<td *ngFor="let lag of ce.lags">
    <div class="form-group1">
        <input name="name" [(ngModel)]="lag.name" [ngModelOptions]="{standalone: true}"  class="form-control" pattern="[0-9]*(\.[0-9]+)?" required>
    </div>

</td>

这就是我使用表单标签的方式:

 <form #f="ngForm" (ngSubmit)="onSubmit()">

我有一个包含表单的模态,当模态被销毁时,我在控制台中收到以下错误:

表单提交已取消,因为表单未连接

模态被添加到一个<modal-placeholder>元素中,该元素是<app-root>我的顶级元素的直接子元素.

从DOM中删除表单并在Angular 2中删除此错误的正确方法是什么？我目前正在使用componentRef.destroy();

我正在使用Angular 5进行前端应用程序,我需要隐藏一个搜索框,但点击一个按钮,搜索框将显示并设置焦点.

我已尝试使用指令左右的stackoverflow中找到的几种方法,但没有运气.

以下是示例代码:

@Component({
   selector: 'my-app',
   template: `
    <div>
    <h2>Hello</h2>
    </div>
    <button (click) ="showSearch()">Show Search</button>
    <p></p>
    <form>
      <div >
        <input *ngIf="show" #search type="text"  />            
      </div>
    </form>
    `,
  })
  export class App implements AfterViewInit {
  @ViewChild('search') searchElement: ElementRef;

  show: false;
  name:string;
  constructor() {    
  }

  showSearch(){
    this.show = !this.show;    
    this.searchElement.nativeElement.focus();
    alert("focus");
  }

  ngAfterViewInit() {
    this.firstNameElement.nativeElement.focus();
  }

搜索框未设置为焦点.我怎样才能做到这一点？谢谢.

我试图在Angular 5上进行自定义验证,但我面临以下错误

Expected validator to return Promise or Observable

我只想在表单中返回错误,如果值与所需的值不匹配,那么我的代码是:

这是我的表单所在的组件

  constructor(fb: FormBuilder, private cadastroService:CadastroService) {
    this.signUp = fb.group({
      "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])],
      "email": ["", Validators.compose([Validators.required, Validators.email])],
      "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])],
      "cpf": ["", Validators.required, ValidateCpf]
    })     
   }

此代码在我想要实现的验证的文件中:

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

export function ValidateCpf(control: AbstractControl){
    if (control.value == 13445) {
        return {errorCpf: true}
    }
    return null;
}

有人能帮我吗？这种类型的验证只适用于observables,还是我能做到而不是一个承诺或可观察的？谢谢

我想只使用材料组件执行密码和确认密码验证 ,如果和.确认许多资源无法实现,则在确认密码字段下面显示错误消息.confirm password field doesn't matchif it is empty

也试过这个视频.

这是我正在寻找的材料成分

HTML

     <mat-form-field >
        <input matInput  placeholder="New password" [type]="hide ? 'password' 
          : 'text'" [formControl]="passFormControl" required>
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 
          'visibility_off'}}</mat-icon>
        <mat-error *ngIf="passFormControl.hasError('required')">
            Please enter your newpassword
         </mat-error>
      </mat-form-field>

      <mat-form-field >
         <input matInput  placeholder="Confirm password" [type]="hide ? 
              'password' : 'text'" [formControl]="confirmFormControl" 
                    required>
         <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 
                'visibility_off'}}</mat-icon>
         <mat-error *ngIf="confirmFormControl.hasError('required')">
          Confirm your …

我想创建一个带有角度2的单个大表单.但是我想用多个组件创建这个表单,如下例所示.

应用组件

<form novalidate #form1="ngForm" [formGroup]="myForm">
<div>
    <address></address>
</div>
<div>
    <input type="text" ngModel required/>
</div>

<input type="submit" [disabled]="!form1.form.valid" > </form>

地址组件

<div>
<input type="text" ngModel required/> </div>

当我使用上面的代码时,它在我需要的浏览器中可见,但是当我删除地址组件中的文本时,未禁用提交按钮.
但是当我删除应用程序组件中输入框中的文本时,该按钮被正确禁用.

我的Angular应用程序中有一个自定义表单控件组件,它实现了ControlValueAccessor接口.

但是,我想访问FormControl与我的组件关联的实例.我正在使用反应形式FormBuilder并使用formControlName属性提供表单控件.

那么,我如何FormControl从自定义表单组件内部访问实例？

我正在使用Reactive Forms在Angular2中构建一个表单.我正在使用FormBuilder来创建一组字段.对于文本框,这非常有效.但我找不到单选按钮的formControl.

这是如何运作的？我应该<input formControlName="gender" type="radio">像文字输入那样做吗？

我知道有类似的问题已被提出,但我找不到一个好的答案.我想以Angular形式创建一个选择列表,其中每个选项的值是一个对象.另外,我不想使用2路数据绑定.例如,如果我的Component包含以下字段:

    lUsers: any[] = [
        { Name: 'Billy Williams', Gender: 'male' },
        { Name: 'Sally Ride', Gender: 'female'}
        ];
    curUser: any;

我希望我的HTML模板包含这个:

    <select #selectElem (change)="setNewUser(selectElem.value)">
        <option *ngFor="let user of lUsers" [ngValue]="user">
            {{user.Name}}
        </option>
    </select>

但是,使用此代码,我的setNewUser()函数接收所选用户的Name字段的内容.为什么它选择那个特定的领域,我不知道.我期望它会收到所选选项的"值",我专门设置为用户对象.

请注意,我在选项中使用了ngValue而不是value.这是通过SO的其他人的建议.如果我使用值代替,那么会发生的事情是对象被转换为字符串'[Object object]',这是setNewUser()接收的,这是无用的.

仅供参考,我正在使用角度4.0.0和@ angular/cli 1.1.2在Windows 10上工作.这是setNewUser()方法:

    setNewUser(user: User): void {

    console.log(user);
    this.curUser = user;
    } // setNewUser()

我正在确定将我的日志记录传递给它的确切内容,以及在模板上包含的内容: <pre>{{curUser}}</pre>