typescript - ฉันจะสร้างคำสั่งตรวจสอบแบบกำหนดเอง (เช่น แอตทริบิวต์สำหรับการตรวจสอบ) ใน Angular 2.0 ได้อย่างไร?

ฉันกำลังทำโปรเจกต์เล็ก ๆ สำหรับ Angular 2.0 โดยใช้ TypeScript ตอนนี้จากที่ฉันเข้าใจ Angular 2.0 ไม่มีตัวตรวจสอบค่าพื้นฐานสำหรับแท็ก "min" และ "max" ฉันเข้าใจว่าคุณสามารถสร้างตัวตรวจสอบค่าที่กำหนดเองและแนบมันโดยใช้ FormBuilder แต่ฉันอยากเห็นวิธีการสร้างตัวตรวจสอบค่าที่กำหนดเองในรูปแบบ directive ที่ฉันสามารถแนบกับ attribute ได้ HTML จะมีลักษณะดังนี้:

 <div class="unit">
<div class="label">Age (13 - 120):</div>
<div class="labelTarget">
    <input id="ageFrm" min="13" max="120" type="number" required=""
    ng-control="age" #age="form" [class.error]="!age.valid"
    [(ng-model)]="ageValue"/> {{age.valid}}
</div>
</div>

ตอนนี้ age.valid จะเป็น true เสมอเพราะไม่มีตัวตรวจสอบสำหรับ min และ max ฉันได้ลองสร้างของตัวเองแล้ว ขั้นแรกคือฟังก์ชันการตรวจสอบแบบกำหนดเอง:

import {Control} from "angular2/angular2";

export class HealthAppCustomValidators {

static min(min: number): Function {
  return (control: Control): {[key: string]: any} => {
    var v: number = Number(control.value);
    console.log("validating " + v + " against " + min);
    return v < min ?
              {"min": {"requiredMin": min, "actualMin": v}} :
              null;
  };
  }

static max(max: number): Function {
  return (control: Control): {[key: string]: any} => {
var v: number = Number(control.value);
    return v > max ?
              {"max": {"requiredMax": max, "actualMax": v}} :
              null;
  };
   }
}

และต่อไปคือคำสั่ง (นี่ขึ้นอยู่กับการตรวจสอบโค้ดต้นฉบับ):

import {Attribute, Control, Directive, forwardRef, Provider, NG_VALIDATORS}   from "angular2/angular2";
import {HealthAppCustomValidators} from "./customValidators";

const MIN_VALIDATOR = new Provider(NG_VALIDATORS, {useExisting: 
forwardRef(() => MinValidator), multi:true});

@Directive({
  selector: '[min][ng-control],[min][ng-form-control],[min][ng-model]',
  providers: [MIN_VALIDATOR]
})
export class MinValidator {

  private _validator: Function;

  constructor(@Attribute("min") min: string) {
    console.log(min);
    this._validator = HealthAppCustomValidators.min(Number(min));
  }
  validate(c: Control): {[key: string]: any} { 
    console.log("validate");
    return this._validator(c); 
 }
}

อย่างไรก็ตาม ทุกครั้งที่ฉันนำเข้าคำสั่งจริง ๆ การโหลดหน้าเพจจะล้มเหลวพร้อมข้อผิดพลาดดังต่อไปนี้:

TypeError: validator is not a function
at     http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:12990:24
at Array.reduce (native)
at Function.ListWrapper.reduce (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:4206:19)
at http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:12989:44
at http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:12990:24
at Array.reduce (native)
at Function.ListWrapper.reduce (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:4206:19)
at Control.validator (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:12989:44)
at Control.AbstractControl.updateValidity (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:18871:27)
at  http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:14097:14

ขอความช่วยเหลือเกี่ยวกับวิธีที่ถูกต้องในการทำสิ่งนี้โดยไม่ใช้ FormBuilder จะขอบคุณมาก:

คำตอบ #1

ตามที่เจเรมีแนะนำ

ปัญหาได้รับการแก้ไขตั้งแต่ alpha 45 ซึ่งพวกเขาได้เพิ่มการสนับสนุนสำหรับ Validator ข้อความแสดงข้อผิดพลาดอาจทำให้สับสนอยู่ดี (คุณได้ให้ฟังก์ชัน แล้วทำไมมันถึงไม่ทำงาน?) แต่ข้อความ commit ให้เบาะแส

ปัจจุบัน วิธีเดียวที่ directive จะส่งออก validator ได้คือโดยการให้ฟังก์ชัน ซึ่งทำให้การเขียน validator ที่ขึ้นอยู่กับ input ของ directive นั้นค่อนข้างยุ่งยาก นอกจากการรองรับฟังก์ชันเป็น validator แล้ว ยังรองรับคลาสที่ใช้ interface ของ Validator ด้วยเช่นกัน

ฉันไม่สามารถหาตัวอย่างสำหรับตัวตรวจสอบแบบกำหนดเองใน alpha 44 หรือต่ำกว่าได้ ดังนั้นฉันจึงไม่สามารถบอกได้ว่ามันทำงานอย่างไรในเวลานั้น และมีความเป็นไปได้สูงว่าพวกเขาได้อัปเดตตัวอย่างทั้งหมดและตัวตรวจสอบที่สามารถใช้งานได้ให้ทำงานกับ alpha 45 ขึ้นไปแล้ว

อย่างไรก็ตาม ปัญหานี้ถูกแก้ไขโดยการอัปเกรด Angular2 ไปยังเวอร์ชันล่าสุด (โดยบอกเลยว่า alpha 48 คือเวอร์ชันล่าสุด ตอนคอมเมนต์ผมบอกว่า alpha 47 ผิดพลาดของผม) แม้ว่าจะต้องการอย่างน้อย alpha 45 ก็ตาม