Angular 使用 div id 的表单验证

Question

我正在努力尝试使用此 div 发布表单验证。我在 div 上进行了验证，但是一旦我输入数据，它应该释放保留并将模型设置为 IsInvalid false 但它保持为 true。

is there anything else I need to do?

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: ""

Answer 1

会不会像labablelid上的拼写错误那么简单？

这一行：

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

应该是

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

Answer 2

简单介绍一下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 中看到简单地写（检查我们的 control/formGroup 是个好主意 - 看看我们如何使用 "safe operator"

{{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>

最后，当我们使用FormGroup的FormControl时，我们可以"listen"自己的.ts中的变化（如果我们不想采取特殊的行动，就没有必要，例如，如果只是想看一些 if 是否有效，我们可以在 .html 中使用 valid 并且没有必要）。总是在创建 control/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)
   }

在 official docs 中看到，如果 FormControl 的属性是一个 Observable，则 valueChanges，因此我们可以订阅此属性

Angular 使用 div id 的表单验证

Angular Form Validation using div id

typescript

angular

angular-reactive-forms