Angular2子组件验证

Question

I have a form that includes a child component for a simple dropdown list. I need to require all fields on the form including the dropdown list from the child component. I am unclear on the best approach to make this happen. Currently, I have the following code which does not properly enforce the requirement for the user to select a value from the child component dropdown list.

Parent Component:

 <form (ngSubmit)="createDisbursementAccount()" #createDisbursementAccountForm="ngForm" class="form-horizontal"> <div class="form-group"> <label class="col-xs-4 control-label">{{ "LABELS.DISBURSEMENT_ACCOUNT_DESCRIPTION" | translate }}</label> <div class="col-xs-8"> <input class="form-control" required maxlength="500" type="text" name="description" [(ngModel)]="disbursementAccount.description" /> </div> </div> <div class="form-group"> <label class="col-xs-4 control-label">{{ "LABELS.DISBURSEMENT_ACCOUNT_BANK_ACCOUNT_NAME" | translate }}</label> <div class="col-xs-8"> <bank-accounts-dropdown required [(bankAccountId)]="disbursementAccount.bankAccountId" (bankAccountChanged)="bankAccountChanged($event)"></bank-accounts-dropdown> </div> </div> <span class="pull-right"> <button type="submit" class="btn btn-primary btn-xs" [disabled]="!createDisbursementAccountForm.form.valid">{{ "GLOBAL.SAVE_TEXT" | translate }}</button> <button type="button" class="btn btn-xs" (click)="exitDisbursementAccount()">{{ "GLOBAL.CANCEL_TEXT" | translate }}</button> </span> </form> 

Child Component:

 <select [(ngModel)]="selectedBankAccountId" (change)="onChange($event.target.value)" [(disabled)]="isDisabled"> <option value="" disabled>{{ "GLOBAL.DEFAULT_SELECTION" | translate }}</option> <option *ngFor="let bankAccount of bankAccounts" value={{bankAccount.id}}> {{bankAccount.name}} </option> </select> 

Answer 1

You need to use ngDefaultControl and ngModel , this way this is registered as a form control, and now you also do not need the two-way binding for bankAccountId, you can just use a simple @Input , the value change will be caught by the parent since ngDefaultControl adds two-way binding.

<bank-accounts-dropdown required name="bankAccountId"
    [bankAccountId]="disbursementAccount.bankAccountId" ngModel ngDefaultControl>
</bank-accounts-dropdown>

Demo