Angular ControlGroup Проверка не сброса значений

Question

Я не могу сбросить проверку, когда пользователь вводит значение в пользовательский интерфейс.

В отладчике я вижу, что значение передается в onModelChange, которое никогда не будет сброшено.Я хотел бы, чтобы проверка знала, что в элементе управления есть значение, а не блокировала его и установила для IsInvalid значение false.

Что мне нужно добавить в html для [formControl], чтобыподтвердить значение?

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();
                });

обновленный html с значением formControl

<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 (как указано в нескольких комментариях), в настоящее время вы пытаетесь использовать элемент div в качестве элемент управления формой, который не будет работать, вам нужно создать собственный элемент управления формой и внедрить редактор в этом компоненте (см. https://alligator.io/angular/custom-form-control/).

Ваш компонент должен выглядеть примерно так:

@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;
  }
}

Ваш HTML-шаблон сформирует шаблон этого компонента, и вы можете добавить свою привязку к событию change, как вы это делаете в настоящее время, в своем событии изменения вы бы позвонили this.onChange(value), чтобы вызвать обновление модели

Тогда вы будете использовать form в родительском компоненте и установить formControlName на my-component

.

Шаблон родительского компонента:

<!-- where myEditor is the name of the form control in your FormGroup -->
<my-component formControlName="myEditor"></my-component>

Надеюсь, это поможет