如何对表单内的指令进行验证？

Question

我有一个表格，它在我的 html 中使用指令，比如

 <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>

组件有

@ViewChild('form') form: NgForm

在我的列表卖家指令中，我有一个名为 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>

而 ts 文件是

export class SellerComponent implements OnInit {

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

  constructor() {}

  ngOnInit() {}

}

我正在使用 NgForm 进行验证，验证没有在指令内部发生，我该如何对指令内部的字段进行验证？

Answer 1

如果您在表单内部使用子表单使用控件容器与父表单指令集成。使用 viewProviders 为 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>

示例：https://stackblitz.com/edit/angular-ys3jyu

如何对表单内的指令进行验证？

how to do validation for directives inside form?

angular

angular-forms