如何在angular4中为来自ts的反应形式应用自定义指令？

Posted 2023-02-22

【中文标题】如何在angular4中为来自ts的反应形式应用自定义指令？

【英文标题】：How to apply custom directive for reactive forms from ts in angular4?

【发布时间】：2018-07-19 21:44:42

【问题描述】：

我正在按照指导原则使用直接表单从组件构建自定义 由 https://stackblitz.com/angular/ekboynmekgq?file=src%2Fapp%2Fdynamic-form-question.component.html

对于验证消息，我也在创建一个自定义组件， 请参考https://plnkr.co/edit/km7nGR8DjyE4l6tH5JEC?p=preview

在上面的第二个 plunker 链接中，给出了自定义指令方法，但问题是自定义指令直接应用于 html 表单元素而不是表单 ts

直接可以这样应用自定义属性指令就可以了

 <form>
<input type="text" customDirective>
</from>

现在我想使用自定义输入组件构建表单 结构看起来像

<form>
<custom-input></cutom-input>
<custom-dropdown></custom-dropdown>
</form>

我没有理解的一件事，如何应用来自 ts 的属性指令应该与自定义错误组件（第二个 plun 链接）很友好

哪位大神帮忙看看

【问题讨论】：

你应该创建一个自定义验证器

在上面的例子中，第二个 plunk 链接也提供了自定义验证器方法，请检查它，问题是它只能与直接 html 标签一起应用

【参考方案1】：

这个中等链接 - https://medium.com/@tarik.nzl/angular-2-custom-form-control-with-validation-json-input-2b4cf9bc2d73 tarik 可能会让您更好地了解如何操作。

验证器组件

import  Component, Input, forwardRef  from '@angular/core';
import  ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validator  from '@angular/forms';

@Component(
    selector: 'json-input',
    template:
        `
        <textarea
          [value]="jsonString" 
          (change)="onChange($event)" 
          (keyup)="onChange($event)">

        </textarea>
        `,
    providers: [
    
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => JsonInputComponent),
      multi: true,
    ,
    
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => JsonInputComponent),
      multi: true,
    ]        
)
export class JsonInputComponent implements ControlValueAccessor, Validator 
    private jsonString: string;
    private parseError: boolean;
    private data: any;

    // this is the initial value set to the component
    public writeValue(obj: any) 
        if (obj) 
            this.data = obj;
            // this will format it with 4 character spacing
            this.jsonString = JSON.stringify(this.data, undefined, 4); 
        
    

    // registers 'fn' that will be fired wheb changes are made
    // this is how we emit the changes back to the form
    public registerOnChange(fn: any) 
        this.propagateChange = fn;
    

    // validates the form, returns null when valid else the validation object
    // in this case we're checking if the json parsing has passed or failed from the onChange method
    public validate(c: FormControl) 
        return (!this.parseError) ? null : 
            jsonParseError: 
                valid: false,
            ,
        ;
    

    // not used, used for touch input
    public registerOnTouched()  

    // change events from the textarea
    private onChange(event) 

        // get value from text area
        let newValue = event.target.value;

        try 
            // parse it to json
            this.data = JSON.parse(newValue);
            this.parseError = false;
         catch (ex) 
            // set parse error if it fails
            this.parseError = true;
        

        // update the form
        this.propagateChange(this.data);
    

    // the method set in registerOnChange to emit changes back to the form
    private propagateChange = (_: any) =>  ;