模板驱动表单上的角度条件验证

概述我有一个输入字段只有在设置了另一个值时才需要.另一个值来自select.请注意,我的实际形式要复杂得多,但这里是一个示例,显示与此问题相关的部分： 模板： <form name="createPaymentForm" (ngSubmit)="f.form.valid && createPayment()" #f="ngForm" novalidate> <select name="order 我有一个输入字段只有在设置了另一个值时才需要.另一个值来自select.请注意,我的实际形式要复杂得多,但这里是一个示例,显示与此问题相关的部分：

模板：

<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设置为’undefined’以外的任何值时才需要orderNumber.实现这个的最简单方法是什么？

(注意,Angular 5)

解决方法 它可以使用必需的Angular指令来完成,例如[required] =“payment.orderNumberType”(这里他检查payment.orderNumberType是否未定义,null,false或空字符串).
这是[attr.required] =“payment.orderNumberType？true：undefined”的简写.

您有[ngClass] =“{‘has-error’：f.submitted&&！orderNumber.valID}”的问题,因为在“ngAfterVIEwChecked”期间会设置有效,因此Angular不想再次创建作业.用[class.has-error] =“f.submitted&&！orderNumber.valID”替换它不会再让它哭了.

总结

以上是内存溢出为你收集整理的模板驱动表单上的角度条件验证全部内容，希望文章能够帮你解决模板驱动表单上的角度条件验证所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。