gpt4 book ai didi

forms - Angular 2 - 使用带有可选字段的 ngControl

转载 作者:太空狗 更新时间:2023-10-29 17:03:18 27 4
gpt4 key购买 nike

我很难尝试在表单中同时使用 *ngIf 和 ngFormModel 来验证所述表单。

用例是这样的:根据用户输入,隐藏或停用表单中的某些特定字段。但如果显示这些输入,则必须对其进行验证。

当只需要基本验证时,我可以用一种或另一种方式来做:

  • 如果仅需要输入,则使用 ngControlrequired 可以正常工作
  • 如果需要特定格式,可以使用pattern 属性。它不是 Angular,但它可以工作。

但为了实现更复杂的验证,我一直在尝试使用 ngControl 耦合到 ngFormModel 以便使用自定义检查。我使用了以下页面上的代码片段:

How to add form validation pattern in angular2 (以及那里引用的链接)

Angular2 Forms :Validations, ngControl, ngModel etc

我的代码如下:

HTML

<div>
<h1>Rundown of the problem</h1>
<form (ngSubmit)="submitForm()" #formState="ngForm" [ngFormModel]="myForm">
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="model.hideField" ngControl="hideField"> Is the input below useless for you ?
</label>
</div>

<div *ngIf="!model.hideField">
<div class="form-group">
<label for="optionalField">Potentially irrelevant field </label>
<input type="text" class="form-control" [(ngModel)]="model.optionalField" ngControl="optionalField" required #optionalField="ngForm">
<div [hidden]="optionalField.valid || optionalField.pristine" class="alert alert-warning">
This input must go through myCustomValidator(), so behave.
</div>
</div>
</div>

<button type="submit" class="btn btn-primary" [disabled]="!formState.form.valid">I can't be enabled without accessing the input :(</button>
<button type="submit" class="btn btn-default">Submit without using form.valid (boo !)</button>
</form>
</div>

typescript

import {Component, ChangeDetectorRef, AfterViewInit } from 'angular2/core';
import {NgForm, FormBuilder, Validators, ControlGroup, FORM_DIRECTIVES} from 'angular2/common';

@Component({
selector: 'accueil',
templateUrl: 'app/accueil.component.bak.html',
directives:[FORM_DIRECTIVES],
providers: [FormBuilder]
})
export class AccueilComponent implements AfterViewInit {

private myForm: ControlGroup;
model: any;

constructor(fb: FormBuilder, cdr: ChangeDetectorRef) {
this.cdr = cdr ;

this.model = {} ;
this.myForm = fb.group({
"hideField": [false],
"optionalField": [this.model.optionalField, Validators.compose([this.myCustomValidator])]
});
}

ngAfterViewInit() {
// Without this, I get the "Expression has changed after it was checked" exception.
// See also : https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked
this.cdr.detectChanges();
}

submitForm(){
alert("Submitted !");
}

myCustomValidator(optionalField){
// Replace "true" by "_someService.someCheckRequiringLogicOrData()"
if(true) {
return null;
}

return { "ohNoes": true };
}
}

即使使用 *ngIf 从模板中删除输入,构造函数仍然引用控件。这反过来阻止我使用 [disabled]="!formState.form.valid",因为 myForm 是可以理解的无效。

我的目标是可以使用 Angular 2 吗?我确信这不是一个罕见的用例,但以我目前的知识,我还是看不出如何让它发挥作用。

谢谢!

最佳答案

您可以尝试重置控件上的验证器。这意味着,当您希望由于状态更改而将一组新的验证器绑定(bind)到控件时,您将重新定义验证器函数。

在您的例子中,当您的复选框被选中/取消选中时,您希望发生以下情况:

  1. 将输入设置为可选(不是必需的),但仍然根据您的自定义验证器进行验证。
  2. 当复选框未选中时,将控件的验证器恢复到其原始状态。
  3. 再次验证控件,以便更新 form.valid

See my plnkr sample based on Angular.io's Forms Guide

if (optional)
this.heroFormModel.controls['name'].validator = Validators.minLength(3);
else
this.heroFormModel.controls['name'].validator =
Validators.compose([Validators.minLength(3), Validators.required]);

this.heroFormModel.controls['name'].updateValueAndValidity();

关于forms - Angular 2 - 使用带有可选字段的 ngControl,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35728850/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com