title: Angular conditional validation on template driven form
body: <p>I have an input field that is required only if another value is set.  The other value is from a select.  Note, my actual form is much more complicated but here is an example showing the parts that are pertinent to this question:</p>
  
  <p><strong>the template:</strong></p>
  
  <pre><code>&lt;form name="createPaymentForm" (ngSubmit)="f.form.valid &amp;&amp; createPayment()" #f="ngForm" novalidate&gt;
  
    &lt;select name="orderNumberType" #orderNumberType="ngModel" 
      [(ngModel)]="payment.orderNumberType"&gt;
      &lt;option [ngValue]="undefined" disabled&gt;Select&lt;/option&gt;
      &lt;option *ngFor="let opt of paymentIdOptions" [value]="opt.id"&gt;{{opt.label}}&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;div [ngClass]="{ 'has-error': f.submitted &amp;&amp; !orderNumber.valid }"&gt;
      &lt;input type="text" name="orderNumber"
        [(ngModel)]="payment.orderNumber" #orderNumber="ngModel"&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>the component:</strong></p>
  
  <pre><code>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 =&gt; {
        this.paymentIdOptions = orderNumberTypes;
      });
    }
  
    createPayment() {
      console.log(this.payment);
      //do something...
    }
  }
  </code></pre>
  
  <p>My goal is to only require the orderNumber if the orderNumberType is set to any value other than 'undefined'.  What is the easiest way to implement this?</p>
  
  <p>(Note, Angular 5)</p>