Question

我在理解如何在Angular中创建自定义指令时遇到了一些麻烦。我有一个输入字段，用户需要输入一个字符串，但是需要检查该字符串是否不包含某些子字符串。到目前为止，我已经使用了此功能：

checkInvalidStrings(value, invalidValues) {
    let isKbWalk;
    let amount = [];
    invalidValues.forEach(string => {
        if (value.indexOf(string) > -1) {
            amount.push(string);
        } 
    })
    if (amount.length < 4) {
        isKeyboardWalk = false;
    } else {
        isKbWalk = true;
    }
    return isKbWalk;
}

我可以在组件文件的ngModel更改中运行此命令，它可以完美运行，我遇到的问题是我想将其与表单验证链接，因此，如果返回false，我希望它是有效的，如果返回true，则我希望它无效。我相信我需要为此创建一个自定义验证程序指令，但是我遇到了一些麻烦。我想我要问的是如何使用上面的函数，以便可以将其实现为指令来确定它是否有效？我使用的是模板驱动的表单，因为这是构建应用程序所使用的表单，在这一点上，保持一致性比更改为“反应式表单”更简单。

通常，我希望能够对这样的输入执行某些操作，其中kbWalk是用于检查输入字段中无效字符串的指令：

<input [(ngModel)]="data.newValue" name="newValue" #newValue="ngModel" required kbWalk>

到目前为止，我已将所有内容导入到app.module文件中，但是验证无法正常进行，这是我的指令的设置：

import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
import { Invalid } from './invalidStrings';

@Directive({
    selector: '[kbWalk][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: KeyboardWalkValidator, multi: true }
    ]
})
export class KeyboardWalkValidator implements Validator {
    invalidStrings = Invalid.strings;

    constructor() { }

    validate(c: AbstractControl): { [key: string]: any } {
        return null;
    }
}

感谢您的帮助！

Answer 1

我们可以使用自定义验证器来实现上述目的（我认为我们不需要为上述内容创建自定义指令）。以下作品对我有用。

customValidatorTest.ts 文件

import { AbstractControl } from '@angular/forms';

export function ValidateUrl(control: AbstractControl) {
  if ( !control.value.includes('.io')) {
    return { validUrl: true };
  }
  return null;
}

component.ts 文件

import { FormGroup, FormArray, FormBuilder,FormControl, Validators } from '@angular/forms';
import { ValidateUrl } from '../../customValidatorTest';
@Component({
  selector: 'app-educational-details',
  templateUrl: './educational-details.component.html',
  styleUrls: ['./educational-details.component.css']
})

export class EducationalDetailsComponent implements OnInit {
    educationalForm: FormGroup;

    constructor(private formBuilder: FormBuilder){}

    ngOnInit() {
         this.educationalForm= this.formBuilder.group({

            branch:['',[Validators.required,ValidateUrl]]
         })



    }

}

component.html 文件

 // adding only required functionality you directly write formGrop also 
 <tbody formArrayName="educationalDetails">
        <tr  *ngFor="let educationalDetail of educationalForm.controls.educationalDetails.controls; let $i=index" [formGroupName]="$i">

 <td><input  type="text" class="form-control my-1" formControlName="branch" ></td> //if branch input text box doesnt contain ".io" then it is invalid otherwise valid

以下链接可能有帮助

custom validatorar in reactive forms

通过现有功能在Angular 7中创建用于验证的自定义指令？

1 个答案: