【发布时间】：2018-02-13 22:58:04
【问题描述】：
我有一个只有在设置了另一个值时才需要的输入字段。另一个值来自选择。请注意，我的实际形式要复杂得多，但这里有一个示例，显示了与此问题相关的部分：
模板：
<form name="createPaymentForm" (ngSubmit)="f.form.valid && createPayment()" #f="ngForm" novalidate>
<select name="orderNumberType" #orderNumberType="ngModel"
[(ngModel)]="payment.orderNumberType">
<option [ngValue]="undefined" disabled>Select</option>
<option *ngFor="let opt of paymentIdOptions" [value]="opt.id">{{opt.label}}</option>
</select>
<div [ngClass]="{ 'has-error': f.submitted && !orderNumber.valid }">
<input type="text" name="orderNumber"
[(ngModel)]="payment.orderNumber" #orderNumber="ngModel">
</div>
</form>
组件：
import { Component, OnInit } from '@angular/core';
import { PaymentsService } from '../../../services/payments.service';
import { Payment } from '../../../models';
@Component({
selector: 'app-new-payment',
templateUrl: './new-payment.component.html',
styleUrls: ['./new-payment.component.scss']
})
export class NewPaymentComponent implements OnInit {
paymentIdOptions: any = [];
payment: Payment = {};
constructor( private paymentsService: PaymentsService ) { }
ngOnInit() {
this.paymentsService.getOrderNumberTypes().subscribe(orderNumberTypes => {
this.paymentIdOptions = orderNumberTypes;
});
}
createPayment() {
console.log(this.payment);
//do something...
}
}
我的目标是仅在 orderNumberType 设置为“未定义”以外的任何值时才需要 orderNumber。最简单的实现方法是什么？
（注意，Angular 5）
【问题讨论】：
-
我会说最简单的方法是使用响应式表单，因为能够在运行时添加/删除验证是它的好处之一。但是，除此之外，您可以添加两个输入框，每个输入框都有一个 ngIf，如果设置了另一个值，则仅显示具有所需属性的输入框。
-
嗯，这听起来可能有效（带有 ngif 的两个框），但由于某种原因，我感觉不对。当然我可以使用响应式表单，但我只是在过去几天里试图围绕模板驱动的表单进行思考。我希望模板驱动的表单可以具有与响应式表单相同的功能，否则为什么有角的人甚至会费心为您提供不完整的解决方案？
-
模板驱动是为了简单和容易......那种只需要直接验证的表单。反应形式适用于任何超越直接的东西。不...它们与功能不兼容。否则他们为什么会提供两种方法。哈哈。 :-)
-
不，我不知道，不确定什么是复数，但我很难从视频中学习（如果是这样的话），而且在我的经验中，教程几乎总是缺少一些关键信息。如果我找不到有关该主题的 O'Reilly 书籍，那么我会假设从反复试验中学习。
-
@Dallas Caley [required] 只需要一个布尔值，因此如果您的 id 不能是（未定义、null、0、false 或空字符串），请提供 [required]="payment.orderNumberType"。如果只需要检查是否 undefined [required]="payment.orderNumberType === undefined".
标签： angular validation