Question

我正在努力尝试与此div释放表单验证。我在div上启用了Validation，但是一旦输入数据，它就应释放保留并将模型设置为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: ""

Answer 1

这和lablelid上的拼写错误一样简单吗？

此行：

[[2,3,1],[3,3,0],[3,4,1],[4,3,1],[4,4,0],[4,5,1]]

应该是

[lablelid]: ["",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是一个好主意-看看我们如何使用“安全运算符”

{{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时，我们可以“监听”自己的.ts中的更改（如果我们不想采取特殊的操作，例如只想看到一些如果有效，则可以在.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)
   }

在official docs中看到valueChanges是否是可观察的FormControl属性，因此我们可以订阅该属性

使用div id进行角度形式验证

2 个答案: