标签: angular2-forms

我有一个简单的表单,需要验证输入的开头和结尾是否不是空格.

在HTML5中,我将这样做:

<input type="text" pattern="^(?!\s|.*\s$).*$">

新Angular 2 ngControl指令中验证模式的正确属性是什么？官方Beta API仍缺乏此问题的文档.

我必须重置我的表单以及验证.是否有任何方法可以将表单状态从ng-dirty重置为ng-pristine.

根据thinkgram.io,目前支持的验证器是:

• 需要
• 使用MINLENGTH
• 最长长度
• 图案

所以,考虑下面的代码(这里是plunkr):

@Component({
  selector: 'my-app',
  template: `

  <form #formRef="ngForm">
    <input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/>
    <input type="text" [(ngModel)]="secondValue" maxlength="5" name="secondValue" required/>
    <button type="submit"> Submit </button> 
  </form>

  FORM: {{formRef.form | json }}
`
})
export class AppComponent { 
  firstValue = -22;
  secondValue = "eyy macarena!"; 
}

虽然minlength支持,但min="0"角度验证会忽略它:

因此,要在firstValue ngModel <0时使表单导致错误,我是否需要构建自定义验证器？

我有以下Angular 2形式:

<register>
    <form [ngFormModel] = "registrationForm">
        <div class = "form-group">
            <label class = "control-label" for="email">Email</label>
            <input class = "form-control" type="email" id="email" ngControl="email" #email="ngForm">
        </div>
        <div *ngIf = "email.touched && email.errors">
            <div *ngIf = "!email.errors.required && email.errors.underscoreNotFound" class = "alert alert-danger">
                <span>Underscore is required</span> 
            </div>
            <div *ngIf = "email.errors.required" class = "alert alert-danger">
                <span>Email is required</span>
            </div>
        </div>
        <div class = "form-group">
            <label class = "control-label" for="password">Password</label>
            <input class = "form-control" type="password" id="password" ngControl="password" #password="ngForm">
        </div>
        <div *ngIf = "password.touched …

我的要求是我需要创建一个带有嵌套组件的表单.我正在为每个表单字段创建组件意味着对于文本框会有一个组件,对于单选按钮会有另外一个组件就像明智一样.
<form [formGroup]="myForm">
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>

我想使用Reactive表单来创建这个表单,因为我希望我的html不受影响,只通过打字稿进行表单验证.

但是我找不到任何解决方案我们如何能够将反应形式与组件嵌套.

是否有一种方法可以在提交时触发所有被动形式的验证器,而不仅仅是"脏"和"触摸"事件？

这样做的原因是我们有一个非常大的表单,它不表示是否需要字段,用户可能会错过一些必需的控件,因此在提交时,预计会丢失所有错误的字段最终用户将被显示.

我已经尝试通过使用标记将表单标记为"触摸"

FormGroup.markAsTouched(true);

它工作,所以我也尝试将其标记为"脏"

FormGroup.markAsDirty(true);

但是班级的css仍然是"原始的",

有没有办法从组件手动触发它,我试着谷歌搜索无济于事,谢谢你提前!

UPDATE

我已经通过迭代FormGroup.controls并将其标记为"脏"来完成它,但是有一种"标准"方法来执行此操作.

我有一个组件,它在表单中有一个表单和一些子组件.子组件是使用创建的*ngFor,每个子组件都包含input元素.Angular2编译器给出的错误如[formGroup]未定义.

这个实现是正确的吗？

父组件:

<section class="data-body">
        <form [formGroup]="checkoutForm" novalidate>
            <app-checkout-product-view *ngFor="let item of checkoutData.products" [_product]="item" formGroupName="products"></app-checkout-product-view>
                <div class="col-md-4">
                    <label>Nominee:</label>
                    <select required [(ngModel)]="checkoutData.selectedNominee" [ngModelOptions]="{standalone: true}">
                        <option *ngFor="let nominee of checkoutData.nomineeList" [value]="nominee">{{nominee}}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label>Bank Account:</label>
                    <select [(ngModel)]="checkoutData.selectedBank" required [ngModelOptions]="{standalone: true}">
                        <option *ngFor="let bank of checkoutData.bankList" [value]="bank">{{bank}}</option>
                    </select>
                </div>
            </div>
        </form>
    </section>

子组件: app-checkout-product-view

<div class="row">
    <div class="col-md-4">
        <md-input required [(ngModel)]="product.investmentAmount 
                  formControlName="investmentAmount">
            <span md-prefix>&#x20B9;</span><!--Rupee icon-->
        </md-input>
    </div>
</div>

PS:所有的进口都很好所以我很确定这里没有导入错误

我'question1'在表单对象中有一个名称的表单控件,parentForm我已按以下方式订阅它.

它有两个选项的单选按钮Yes和No,当我选择No,我得到Yes,当我选择Yes它的一个No.

this.parentForm.controls['question1'].valueChanges.subscribe(
  (selectedValue) => {
    // If option `No is selected`
    console.log(selectedValue);  // displays No. OK
    console.log(this.parentForm.value['question1']);  // displays Yes. Problem is here
  }
);

selectedValue变量具有正确的值,但如果我这样做,console.log(this.parentForm.value['question1']则给出前一个值.

我试图setTimeout()在检索之前输入一个值this.parentForm.value['question1'],它只是工作正常.

setTimeout(() => {
  console.log(this.parentForm.value['question1']); // gives the correct value.
}, 500);

但我的问题是,为什么parentForm在控件的值发生变化时不会更新,而且我只是在更改值后才检索其值.

注意:我不想观察parentForm.valueChanges,而不是我的要求.

我在angular2应用程序中尝试了很多日期选择器,但它们都没有工作.虽然日期选择器显示在视图上,但所选日期的值没有进入ngModel变量.

我有Angular2 反应型.我创建了formControls并将其分配给输入字段[formControl]=....据我所知,它创造了nativeElement <-> formControl链接.

我的问题:是有可能得到nativeElement的formControl？我想做点什么myFormControl.nativeElement.focus()