没有通过ElementRef获得自定义属性的“名称”

我正在使用组件的“名称”作为条件(如果存在)。 我正在尝试通过ElementRef的nativeElement属性获得它。 它可以很好地与(input,textarea)之类的元素配合使用,但是对于我的自定义组件却无法定义。

import { BasicPermissionService } from './../components/basicpermission.service';
import { Directive,forwardRef,Input,ElementRef } from '@angular/core';
import { NG_VALIDATORS,AbstractControl,ValidatorFn,Validator,FormControl } from '@angular/forms';

@Directive({
   selector: '[ifRequired][ngModel]',providers: [
      { provide: NG_VALIDATORS,useExisting: ifRequiredValidator,multi: true }
   ]
})
export class ifRequiredValidator implements Validator {
validator: ValidatorFn;

constructor(private elem: ElementRef,private basicPermissionService: BasicPermissionService) {
    this.validator = this.ifRequiredValidateFactory(elem.nativeElement.name);
}

validate(c: FormControl) {
    return this.validator(c);
}

ifRequiredValidateFactory(control: string): ValidatorFn {
    return (c: AbstractControl) => {
        let isrequired = this.basicPermissionService.basicSectionisrequired(control);
        let isValid = false;
        //if field is not required then do nothing
        if (!isrequired) {
            return null;
        }
        switch (true) {
            case typeof c.value == "number":
                isValid = c.value != null && c.value != 0;
                break;               
                ...
        }

        if (isValid) {
            return null;
        } else {
            let validatioMessage = (control: string) => {
                switch (control) {
                    case "name":
                        return "Mandatory field";
                    ...
                }
            }
            return {
                ifRequired: {
                    valid: false,message: validatioMessage(control)
                }
            };
        }
    }
   }
 }

它适用于

 <input type="text" [(ngModel)]="basicInfo.Name" maxlength="200" placeholder="Name" name="name"
                     maxlength="2000" #name="ngModel"
                    ifRequired/>

但不是

<radio-select [IsMultiple]="true" [FieldType]="eventTypeField"
                            [SelectedIds]="basicInfo.EventTypeIds"
                            [(ngModel)]="basicInfo.EventTypeIds" [rname]="'EventType'" name="EventType"
                             #EventType="ngModel" ifRequired>
                        </radio-select>
h8621007 回答:没有通过ElementRef获得自定义属性的“名称”

如果我理解正确的问题,则您正在尝试使用选择器“ radio-select”访问HTML中引用的Component。您可以使用以下代码:

HTML:

<radio-select [IsMultiple]="true" [FieldType]="eventTypeField"
                        [SelectedIds]="basicInfo.EventTypeIds"
                        [(ngModel)]="basicInfo.EventTypeIds" [rname]="'EventType'"name="EventType"
                         #EventType="ngModel" ifRequired
                          #radioSelectComponent>
                    </radio-select>

组件:

@ViewChild('radioSelectComponent')radioSelectComponent:

您现在可以使用变量“ radioSelectComponent”引用该组件,从而访问其所有成员。

,

为指令类中的name添加一个输入属性

@Input() name: string;

然后尝试访问名称属性,而不是通过ElementRef对象访问属性。

希望有帮助!

本文链接:https://www.f2er.com/3103146.html

大家都在问