标签: angular2-forms

我有一个textarea用户将键入一些文本的位置.文本不能是JavaScript或HTML等.我想手动清理数据并将其保存为字符串.

我无法弄清楚如何使用DomSanitizationService手动清理我的数据.

如果我{{ textare_text }}在页面上,那么数据被正确清理.

如何手动完成我的操作string？

我有一个登录表单,其中包含电子邮件和密码字段.

我选择了浏览器自动填充功能.

问题是:当浏览器自动填充登录表单时,这两个字段都是原始且未触及的,因此禁用了提交按钮.

如果我单击禁用按钮,它会启用并触发提交操作,这很好.但是默认的禁用方面非常糟糕,可能会让一些用户感到失望.

你有一些关于如何处理的想法吗？

是否不可能在ng-content中包含表单输入元素并将其"连接"到父组件的ngForm实例？

将此基本模板用于父组件:

<form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>               
<ng-content></ng-content>
<button type="submit">Submit</button>
</form>

然后在子组件里面放入"ng-content",如下所示:

<input type="text" [(ngModel)]="user.firstName" #firstName="ngModel" name="firstName" required minlength="2">

在提交父表单时,子控件不可用,这也意味着子组件中的任何内容的脏/验证不会反映在父表单上.

这里缺少什么？

我的角度2项目中有一个表格.

我知道如何从API中检索数据.但是不知道如何在那里执行CRUD操作.

任何人都可以帮我解决如何以JSON格式将表单数据发送到PHP /任何其他语言的Web服务的简单代码...

帮助将不胜感激.谢谢

我有以下模板.我正试图掌握反应形式,但我遇到了问题.

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form>
            <div class="col-md-12 col-sm-12">
                <div class="form-group col-md-3 col-sm-6">
                    <label>First Name*  </label>
                    <input formControlName="firstname" type="text" class="form-control input-sm">
                </div>
            </div>
        </form>
    </div>
</form>

然后在我的组件中我有:

@Component({
    selector: 'guest-input',
    templateUrl: './guest-input.component.html',
})
export class GuestInputComponent implements OnInit {
    @Input()
    guest: Guest;

    guestForm: FormGroup;

    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.guestForm = this._fb.group({
            firstname: ['test', [Validators.required, Validators.minLength(3)]]
        });
    }

这一切对我来说都很好,但由于某种原因,我得到:

错误:未捕获(在承诺中):错误:formControlName必须与父formGroup指令一起使用.您将要添加formGroup指令并将其传递给现有的FormGroup实例(您可以在类中创建一个).

我以为我已经在我的身上宣布了这一点<form>.

ERROR TypeError: jit_nodeValue_4(...).$any is not a function
at Object.eval [as handleEvent] (AddNewConnectionsComponent.html:42)
at handleEvent (core.js:13581)
at callWithDebugContext (core.js:15090)
at Object.debugHandleEvent [as handleEvent] (core.js:14677)
at dispatchEvent (core.js:9990)
at eval (core.js:10611)
at HTMLInputElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4744)
at ZoneDelegate.invokeTask (zone.js:420)

我在表单组的必填字段上收到此错误.

我的ts文件代码

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

     @Component({
   selector: 'app-add-new-connections',
 templateUrl: './add-new-connections.component.html',
 styleUrls: ['./add-new-connections.component.scss']
})
export class AddNewConnectionsComponent {

 addNewConnectionForm: any;

 constructor(public fb: …

• 正在编辑表示实体状态的表单(变脏)
• 表单正在提交,实体状态现在与表单状态对齐,这意味着表单现在应该设置为原始状态.

我们怎么做？有$setPristine()在NG1.顺便说一句,我说的ControlGroup是形式.

我使用"angular2 webpack"和"angular2/form,Observable",但遇到错误,需要帮助..

有一个自定义表单验证器 -

import {Observable} from 'rxjs/Rx';
import {REACTIVE_FORM_DIRECTIVES,FormControl, FormGroup, Validators} from '@angular/forms';

emailShouldBeUnique(control:FormControl) {
    return new Observable((obs:any)=> {
      control.valueChanges
        .debouceTime(400)
        .distinctUntilChanged()
        .flatMap(term=>return !this.userQuery.emailExist(term))
        .subscribe(res=> {
            if (!res) {obs.next(null)}
            else {obs.next({'emailExist': true}); }; }
        )});}

我可以找到文件 "/projection_direction/node_modules/rxjs/operator/debounceTime.js"

为什么会有这样的错误 -

属性'debouceTime'在'Observable'类型上不存在.

我有一个像angular2一样的数据驱动形式,如下所示

this.formBuilder.group({
  'name': ['',Validators.required],
  'description': ['', Validators.required],
  'places': this.formBuilder.array([], Validators.minlength(1)) 
})

我想为placeformArray 添加验证,所以我添加minlength验证,但minlength验证不适用于formArray.

formArray的其他验证是什么,因此只有当places数组包含至少一个地方时,表单才有效.

我的组件中有一个反应形式,我想touched在每个输入上设置属性等于true.我目前的代码是这样但它却引发了我的错误Cannot set property touched of #<AbstractControl> which has only a getter:

addressForm: FormGroup;

...

this.addressForm = this._fb.group({
    street: ["", [<any>Validators.required]],
    city: ["", [<any>Validators.required]],
    state: ["", [<any>Validators.required]],
    zipCode: ["", [<any>Validators.required]],
    country: ["", [<any>Validators.required]]
});

...

for (var key in this.addressForm.controls) {
    this.addressForm.controls[key].touched = true;
}

如何设置touched每个输入的值true？