Question

一旦用户在用户界面中输入值，我将无法重置验证。

在调试器中，我可以看到该值正在传递到永远不会重置的onModelChange中。我希望验证知道控件中有一个值，而不是阻止它，并将值IsInvalid设置为false。

我需要在[formControl]的html中添加什么以验证值？

UI 输入值后，应删除红色框

HTML：

<div contenteditable="true"
     style="width: 100% !important; overflow: hidden"
     class="form-control sentence-part-values-inline sentence-part-values-inline-textbox-number"
     [attr.id]="editorId">
</div>

打字稿：

@Output() public modelchange: EventEmitter<any> = new EventEmitter();
    public onModelChange(): void {
        this.validate();
        this.modelchange.next(this.getModel());
    }  

    initControlGroup(fb: FormBuilder) : FormGroup {
        return fb.group({
            "value": ['', Validators.required]        
        });
    }



(<any>window).CKEDITOR.instances[this.editorId].on("change", () => {
                    self.model.Value = (<any>window).CKEDITOR.instances[self.editorId].getData();
                    self.onModelChange();
                });

将formControl设置为值的更新的HTML

<div contenteditable="true"
     style="width: 100% !important; overflow: hidden"
     class="form-control sentence-part-values-inline sentence-part-values-inline-textbox-number"
     [formControl]="value"
     [attr.id]="editorId">
</div>

ts类

 interface SentencePartModel extends SentencePartModelBase {
        Type: SentencePartType;
        Value: string;
    }

Answer 1

很高兴看到完整的代码，但是我相信您需要创建一个实现ControlValueAccessor的组件（正如许多注释所表明的那样），您目前正在尝试使用{{1} }作为无法使用的表单控件，您需要创建一个自定义表单控件并在此组件中实现您的编辑器（请参见https://alligator.io/angular/custom-form-control/）。

您的组件应如下所示：

div

您的HTML模板将构成此组件的模板，您可以像当前一样将绑定添加到@Component({ selector: 'my-component', ..., providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MyComponent), multi: true } ] }) export class MyComponent implements OnInit, ControlValueAccessor { @Input() disabled = false; theModel: string; onChange: (value: string) => {}; onTouched: () => {}; ... writeValue(value: string): void { // allows angular to bind to the model (theModel) this.theModel = value; this.onChange(this.value); } registerOnChange(fn: (value: string) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { this.onTouched = fn; } setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } }事件，在您的change事件中，您将调用change来触发模型更新< / p>

您的用法是在父组件中创建this.onChange(value)，并在您的form上设置formControlName

父组件模板：

my-component

希望这会有所帮助

Angular ControlGroup验证不重置值

1 个答案: