Zugriff auf den Validator in einer benutzerdefinierten Komponente erforderlich

Question

Ich brauche Hilfe. Ich versuche, eine benutzerdefinierte Komponente zu erstellen, die einen Dropdown-Wert umschließt und die Standardoption --Select-- je nachdem, ob sie erforderlich ist, ein- oder ausblendet. (Und ich möchte andere benutzerdefinierte Logik später auf diese Komponente anwenden)

Wie bekomme ich den Validator.required in meinem benutzerdefinierten Steuerelement, das über die reaktive Form des Elternelements festgelegt ist ??

Ich bin neu in Angular aber nicht AngularJS

Parent page html:

<div formGroupName="siteType"> 
    <my-dropdownlist 
     id="siteType" 
     formControlName="code" 
     [items]="arrayOfItems"> 
    </my-dropdownlist> 
</div> 

Parent page .ts:

export class MyPage { 

serviceForm: FormGroup = this.fb.group({ 
    siteType: this.fb.group({ 
     code: [serviceData.siteType, Validators.required] 
    }) 
}); 

Custom Control html:

<select class="form-control" id="itemType"> 
    <option *ngIf="!selectedValue && required">--Select--</option> 
    <option *ngFor="let item of items" [value]="item"> 
     {{ item }} 
    </option> 
</select> 

Custom Control ts:

import { Component, Input, Output, EventEmitter, forwardRef, OnInit} from '@angular/core'; 
import { NG_VALIDATORS, FormControl, Validator, NgForm, FormBuilder } from '@angular/forms'; 

@Component({ 
    selector: 'my-dropdownlist', 
    templateUrl: './dropdownlist.component.html', 
    providers: [ 
     { 
      provide: NG_VALIDATORS, 
      useExisting: forwardRef(() => DropdownListComponent), 
      multi: true 
     } 
    ] 
}) 
export class MyDropdownListComponent implements Validator, OnInit { 
    @Input() items: any[]; 
    @Input() required: boolean = false; 
    @Input() formControlName: string; 
    private selectedValue: any; 

    ngOnInit() { 
     //Some way to get at the Validator.required set on the parent form here so I can tell whether to apply it to my dropdown? 
    } 
    public validate(c: FormControl) { 
     return null; //TODO for additional future validation 
    } 
} 

Answer 1

assumingly Kind sollte eine generische Komponente für Wiederverwertbarkeit sein. Was ich tun würde, ist die verschachtelte Formsteuerung und nicht die Zeichenfolge. Dies führt dazu, dass Sie die Formularsteuerung mit allen darin enthaltenen Validatoren erhalten. Zur gleichen Zeit, da Sie das Objekt erhalten, fängt der Elternteil auch die Änderungen an, die an dem Feld vorgenommen wurden. So um die Kontrolle passieren:

<my-dropdownlist 
    [ctrl]="serviceForm.controls.siteType.controls.code" 
    [items]="arrayOfItems"> 
</my-dropdownlist> 

Dann natürlich ändern die @Input entsprechend:

@Input() items: any[]; 
@Input() ctrl: FormControl; 

Da ich in Ihrem Code sehen können, dass Sie in Zukunft Validierungen haben, bedeutet, dass wir bedingt die zeigen können, --Select-- Option nur durch Prüfen, ob die Form Kontrolle gültig ist oder mit ctrl.errors.required:

<select class="form-control" id="itemType" [formControl]="ctrl"> 
    <option *ngIf="!ctrl.valid" [ngValue]="null">--Select--</option> 
    <option *ngFor="let item of items" [value]="item"> 
    {{ item }} 
    </option> 
</select>  

Sie können auch die NG_VALIDATORS von den Anbietern loswerden :)