Блог

Я изо всех сил пытаюсь выполнить проверку формы с помощью этого div. Я получаю проверку, работающую с div, но как только я ввожу данные, он должен освободить удержание и установить для модели значение IsInvalid false, но оно сохраняет его равным true.

есть ли что-нибудь еще, что мне нужно сделать?

ts-файл

  initControlGroup(fb: FormBuilder) : FormGroup {
        var labelid = this.editorId;
        return fb.group({
            labelid: ["",Validators.required]        
        });
    }

onValueChange(model: SentencePartModelBase) {        
    this.modelchange.next(model);
}
  

время выполнения html

 <div id="descriptor-7c1f8c31-9327-a782-6653-6c29b3e7f279">1</div>
  

HTML

 <Descriptor [model]="model" (modelchange)="onValueChange(model)"></Descriptor>
  

Также попробовал этот же результат

  initControlGroup(fb: FormBuilder) : FormGroup {
        var labelid = this.editorId;
        return fb.group({
            [labelid]: ["",Validators.required]        
        });
    }
  

Отладчик отображает значение в виде пустой строки

 descriptor-e614bca5-d7bc-e8e3-fb99-33b735fb830c: FormControl
asyncValidator: null
dirty: (...)
disabled: (...)
enabled: (...)
value: ""
  

Кратко объясните о FormControl и FormGroup (я не уверен, что это может помочь)

В Angular у нас может быть FormControl

 control:FormControl=new FormControl('value',Validators.required)
  

Или FormGroup, это группа FormControls

 formgroup:FormGroup=new FormGroup(
{
     prop1:new FormControl('value of prop1",Validators.required),
     prop2:new FormControl('value of prop2",Validators.required)
})
  

Вы можете использовать FormBuilder для создания FormControl, но это необязательно

 formgroup:FormGroup=this.fb.group(
{
     prop1:['value of prop1",Validators.required],
     prop2:['value of prop2",Validators.required]
})
  

Ну, когда у нас есть сложный объект, обычно мы создаем функцию для создания FormGroup. Хорошо, что у него есть интерфейс, который поможет нам

 export interface Imodel
{
    prop1:string;
    prop2:string;
}
createFormGroup(data:any):FormGroup{
    data = data || {} as Imodel;
    return new FormGroup(
    {
         prop1:new FormControl(data.prop1,Validators.required),
         prop2:new FormControl(data.prop2,Validators.required)
    })
}
//so we can do in ngOnInit or in subscribe of a service:
   this.formGroup=this.createFormGroup(null) //create an empty formGroup
   this.formGroup=this.createFormGroup(data) //create an formGroup with data
  

FormControl или FormGroup существуют независимо от того, используем мы ввод или нет. Мы можем видеть в html просто write (и неплохо бы проверить наш элемент управления / FormGroup — посмотреть, как мы используем «безопасный оператор»

 {{control?.value}} - {{control?.valid}}
{{formGroup?.value|json}} - {{formGroup?.valid}}
  

Как использовать этот элемент управления в html?

 <!--for the control-->
Control:<input [formControl]="control">
<div *ngIf="control?.invalid">Control invalid</div>
  

.

 <!--for the formGroup-->
<!--I put a *ngIf to avoid errors when formGroup is null or undefined 
     (At very first of the application)-->
<div *ngIf="formGroup" formGroup="formGroup">
  <p>
    prop1:<input formControlName="prop1">
    <div *ngIf="formGroup.get('prop1')?.invalid">Prop1 required</div>
  </p>
  <p>
    prop2:<input formControlName="prop2">
    <div *ngIf="formGroup.get('prop2')?.invalid">Prop2 required</div>
  </p>
</div>
  

Наконец, когда мы используем FormControl из FormGroup, мы можем «прослушивать» изменения в собственном файле .ts (в этом нет необходимости, если мы не хотим предпринимать особых действий, например, если мы хотим видеть только некоторые, если допустимо, мы можем использовать valid в файле .html, и этов этом нет необходимости). Всегда ПОСЛЕ создания элемента управления / FormGroup

    this.formGroup=this.createFormGroup(null) //create an empty formGroup
   this.formGroup.get('prop1').valueChanges.subcribe(res=>{
           console.log(res)
   }
   //or 
   this.control.valueChanges.subcribe(res=>{
           console.log(res)
   }
  

Смотрите в официальных документах, что значение изменяется, если свойство FormControl является наблюдаемым, поэтому мы можем подписаться на это свойство

Может ли это быть так же просто, как орфографическая ошибка в ярлыке?

эта строка:

 [lablelid]: ["",Validators.required] 
  

должно быть

 [labelid]: ["",Validators.required]