how to do validation for directives inside form?

Question

i have a form which uses directives inside my html like

 <form  novalidate #form="ngForm" (ngSubmit)="updateListing(form)" [ngClass]="{'was-validated': isSubmitted}">
    <div class="row">
        <div class="col-sm-12">
            <h2>Seller Information</h2>
        </div>
    </div>
    <div class="card-box">
        <listing-seller [listingSeller]="listingSeller" [listingForm]="form"></listing-seller>

        <div class="col-sm-12">
            <div class="form-group">

                <label for="Seller_InsideCityLimits"> Inside city limits</label>
                <label>
                    <input type="radio" [value]="true" [(ngModel)]="listingSeller.insideCityLimits" name="InsideCityLimits"> Yes
                </label>
                <label>
                    <input type="radio" [value]="false" [(ngModel)]="listingSeller.insideCityLimits" name="InsideCityLimits"> No
                </label>
                {{listingEditModel.sellers.insideCityLimits}}
            </div>

        </div>
    </div>

component has

@ViewChild('form') form: NgForm

inside my listing-seller directive i have a field called legalname

<div class="form-group">
  <label for="Seller_SellerLegalName">Seller Legal Name</label>
  <input class="form-control" 
         id="Seller_SellerLegalName" required 
         [(ngModel)]="listingSeller.legalName" 
         name="legalname" 
         type="text" 
         #legalname="ngModel">
</div>

and ts file is

export class SellerComponent implements OnInit {

  @Input('listingSeller') listingSeller: Location
  @Input('listingForm') listingForm: NgForm

  constructor() {}

  ngOnInit() {}

}

i am doing validation using NgForm, the validation is not happening inside the directive, how can i do the validtion for the feilds inside the directive?

Answer 1

If you are using sub form inside form Use Control container to integrate with parent form directive. Use viewProviders to provide ControlContainer for Existing form

ControlContainer:

ControlContainer is a superclass for form, formcontrol directive.

applisting.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ControlContainer, NgControl, NgForm } from '@angular/forms';
@Component({
  selector: 'app-listing',
  templateUrl: './listing.component.html',
  styleUrls: ['./listing.component.css'],
  viewProviders: [ { provide: ControlContainer , useExisting: NgForm} ]
})
export class ListingComponent implements OnInit {
  @Input('value') age:number;
  constructor() { }

  ngOnInit() {
  }
}

parent.component.html

<form #f="ngForm" >
  Name
  <input name="fname" type="text" [(ngModel)]="name">
  <app-listing  [value]="age"></app-listing>
</form>

Example:https://stackblitz.com/edit/angular-ys3jyu