- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个响应式表单,其中加载时不需要任何字段。如果选择了一个选项,将向 formGroup 添加额外的表单元素,那么新显示的字段将全部是必需的。如果昵称字段被隐藏,那么您应该能够很好地提交表单。如果显示昵称,则昵称字段是必需的,并且提交按钮将被禁用,直到昵称字段已满。这是我想要做的事情的示例。
我的问题是,一旦显示/隐藏表单元素,如何启用/禁用验证?
应用程序模块.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
应用程序组件.ts
import { Component, OnInit } from '@angular/core';
import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'My Reactive Form';
constructor(
private fb: FormBuilder
) {}
myForm: FormGroup;
showNick: boolean = false;
ngOnInit() {
this.myForm = this.fb.group({
'firstName': new FormControl(),
'nickName': new FormControl('', Validators.required),
'lastName': new FormControl()
})
}
toggleNick() {
this.showNick = !this.showNick;
}
}
app.component.html
<form [formGroup]="myForm">
<div class="my-box">
<label>
First Name
<input type="text" formControlName="firstName">
</label>
</div>
<div class="my-box nickname">
Nickname? <a (click)="toggleNick()">yes / no</a>
</div>
<div class="my-box" *ngIf="showNick">
<label>
Nickname
<input type="text" formControlName="nickName">
<span class="validation-message" *ngIf="!myForm.controls['nickName'].valid && myForm.controls['nickName'].dirty">
This field is invalid
</span>
</label>
</div>
<div class="my-box">
<label>
Last Name
<input type="text" formControlName="lastName">
</label>
</div>
<button [disabled]="myForm.invalid">Submit</button>
</form>
最佳答案
在我的申请中,我有类似的需求。如果用户要求通过文本通知,则需要电话。否则电话号码是可选的。
我写了这个方法:
setNotification(notifyVia: string): void {
const phoneControl = this.customerForm.get('phone');
if (notifyVia === 'text') {
phoneControl.setValidators(Validators.required);
} else {
phoneControl.clearValidators();
}
phoneControl.updateValueAndValidity();
}
它是从 ngOnInit 中的这段代码调用的:
this.customerForm.get('notification').valueChanges
.subscribe(value => this.setNotification(value));
如果用户更改通知字段(它是一个单选按钮),它会调用传递值的 setNotification
方法。如果值是“文本”通知,它会将手机的验证设置为必需。
否则它会清除电话字段的验证。
然后它必须调用 updateValueAndValidity
以使用这个新验证更新表单信息。
关于Angular 4 Reactive Forms 切换隐藏表单元素的验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49371955/
类型‘AbstractControl’上不存在属性‘Controls’。
主要是我很好奇。 我们有一个名为 Unit 的对象在我们的代码库中 - 代表桥梁或道路的组件。在我们的例子中,看到带有 Unit 的 ReactiveUI 命令可能会模棱两可。作为声明中的泛型之一。
我一直听说六边形架构必须与任何框架无关,并使用接口(interface) (SPI) 来委托(delegate)不属于业务层的每个代码部分。 但是如何在不使用额外框架的情况下通过六边形架构创建一个响应
我读了 Reactive Manifesto . 但我无法理解 event driven architectures 之间的核心差异和 message driven architectures .结果
申请要求: 订阅两个事件流 A 和 B 对于每个 A 事件,一段时间后应该有相应的 B 事件 如果没有相应的 B 到达(及时),应用程序会监视 A 事件并发出警报 B 事件可以以与 A 事件不同的顺序
Closed. This question is opinion-based。它当前不接受答案。 想改善这个问题吗?更新问题,以便editing this post用事实和引用来回答。 4年前关闭。
我有一个 ViewModel,它在其初始化程序中有一个输入 init(sliderEvents: Reactive) { 在测试中我想做类似的事情 slider.send(.touchDownInsi
经典实时搜索示例: var searchResults = from input in textBoxChanged from results in GetDa
我有一个响应式(Reactive)管道来处理传入的请求。对于每个请求,我需要调用一个与业务相关的函数 ( doSomeRelevantProcessing )。 完成后,我需要将发生的事情通知一些外部
是否可以为响应式扩展实现基于硬件计时器的自定义调度程序?我该如何开始,有什么好的例子吗? 我有一个硬件可以每毫秒向我发送一个准确的中断。我想利用它来创建更精确的 RX 调度程序。 更新 感谢 Asti
我正在通过网络浏览 Rx 框架 Material ,我发现了很多。 现在,每当我为此在 google 上搜索时,我还会在 wikipedia 链接中找到“响应式(Reactive)编程”。 由于响应式
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题?更新问题,以便 editing this post 可以用事实和引用来回答它. 6年前关闭。 Improve this
SignalR 与响应式扩展是同一回事吗?你能解释一下为什么或为什么不吗? 最佳答案 不,它们绝对不是同一件事。 Reactive Extensions 是一个用于创建和组合可观察的数据流或事件流的库
我知道有一种简单的方法可以做到这一点 - 但今晚它打败了我...... 我想知道两个事件是否在 300 毫秒内发生,就像双击一样。 在 300 毫秒内单击两次左键鼠标 - 我知道这是构建响应式(Rea
我们的应用程序使用 Reactive Extensions (Rx)。这些通常通过 Microsoft 的可下载包安装。但是,当我们发布应用程序时,我们会提供 dll 的副本(即 System.Cor
我想了解 Reactive 和 ReactiveStreams 之间的区别,特别是在 RxJava 的上下文中? 我能想到的最多的是 Reactive Streams 在规范中有一些背压的概念,但它已
我想探索来自 Quarkus 的响应式 REST 客户端的慢速后端,并在他们建议的样本 (https://github.com/quarkusio/quarkus-quickstarts/tree/m
假设我有一个存储桶,我需要从中获取日期早于现在的文档。 该文档如下所示: { id: "1", date: "Some date", otherObjectKEY: "key1" } 对于每个文档,我
我有一个 RIA 服务数据服务,它有几个函数调用,如下所示: public InvokeOperation SomeFunc( SomeData data, Action> callb
我一直在使用 Rx 在单个应用程序中创建事件总线(想想 CQRS/ES),它似乎工作得很好。然而,在调查了一堆不同的事件溯源框架之后,我还没有看到使用过一次 Rx。与基于反射/容器的调度程序相比,它似
我是一名优秀的程序员,十分优秀!