当前位置: 首页 > Web前端 > HTML5

Angular8表单内置API间谍

时间:2023-04-05 15:39:25 HTML5

创建formControl实例来跟踪单个表单控件的值和验证状态

缺少必需项!
从'@angular/core'导入{Component,OnInit};从'@angular/forms'导入{FormControl,Validators};@Component({selector:'app-创建表单',templateUrl:'./create-form.component.html',styleUrls:['./create-form.component.scss']})exportclassCreateFormComponentimplementsOnInit{projectName:FormControl;constructor(){}ngOnInit(){this.projectName=newFormControl('123');}}上面的输入控件绑定了一个formControl类型的初始值,没有添加任何校验规则,使用内置的API来添加规则、校验等操作。projectNameValidate(){//清除现有验证器this.projectName.clearValidators();//添加新的验证器this.projectName.setValidators([Validators.required]);this.projectName.updateValueAndValidity();}Validation
FormGroup跟踪一组FormControl实例的值和有效性状态<部分>团队建设
项目研究<按钮nz-buttontype="提交">提交申请outlayFormInit(){this.outlayGroup=newFormGroup({activity:newFormControl(null,[Validators.required]),project:newFormControl(null,[Validators.required])});}目前表单为响应式,默认更改状态为验证状态,初始值为空(建议使用null而不是'')。现在要求变了,申请表默认团建费初始值设置为1001,但是公司今年效益不是很好,要求团建费不大于1000.outlayFormInit(){this.outlayGroup=newFormGroup({activity:newFormControl(1001,[Validators.required,Validators.max(1000)]),project:newFormControl(null,[Validators.required])});}如果我们输入应用程序页面,直接点击提交申请,虽然不会提交,但是不会有任何提示和红旗。这时,我们需要手动验证表单中的选项。outlayGroupSubmit(事件){如果(!this.outlayGroup.valid){constcontrols=this.outlayGroup.controls;for(constkeyincontrols){if(controls.hasOwnProperty(key)){constformField=controls[key];formField.markAsDirty();formField.updateValueAndValidity();}}返回;}//submitto...}如果要对其中一个formControls进行操作,必须先获取控件再进行操作。this.outlayGroup.get('activity').markAsDirty();this.outlayGroup.get('activity').updateValueAndValidity();提示:不要忘记标记为脏值!FormArray跟踪控件数组的值和有效性状态。
日期被告知
继续添加加原告团体:
提交申请
getplaintiff(){returnthis.prosecuteForm.get('plaintiff')asFormArray;}prosecuteFormInit(){this.prosecuteForm=newFormGroup({日期:newFormControl(null,[Validators.required]),被告:newFormControl(null,[Validators.required]),原告:newFormArray([newFormControl(2,[Validators.required])])});}addMembers(){this.plaintiff.push(newFormControl(null,[Validators.required]));}prosecuteFormSubmit(){console.log(this.prosecuteForm);this.plaintiff.controls.forEach((control,index)=>{control.markAsDirty();control.updateValueAndValidity();});}FormArray的数组元素是FormControl实例;从一组List中获取指定的Control并通过at(index)获取之后进行各种操作是非常重要的;要添加一个新的控件,您需要获取FromArray实例,然后推送而不是添加方法FormBuilder,这是一个可注入的服务提供者。用于创建响应式表单控件。创建一个简单的表单
公司名称企业版地址商务电话
enterprisesInit(){this.enterprisesFormData=this.fb.group({enterpriseName:['',Validators.required],enterpriseAddr:[''],tel:['']});}使用这个服务创建表单比前面三种方式更简单明了更新(值、状态、添加、删除等)FormControlthis.projectName.setValue('456');this.projectName.patchValue('789');this.projectName.setValidators([Validators.required,Validators.minLength(5)]);this.projectName.markAsDirty();this.projectName.updateValueAndValidity();formControl是一个控件,不能增删FormGroupoutlayFormInit(){this.outlayGroup=newFormGroup({activity:newFormControl(1001,[Validators.required,Validators.max(1000)]),project:newFormControl(null,[Validators.required])});//更新单个值this.outlayGroup.get('activity').setValue(2000);//多次更新this.outlayGroup.patchValue({project:'11100001',activity:0});//添加this.outlayGroup.addControl('other',newFormControl(100,[Validators.max(99)]));this.outlayGroup.addControl('游戏',newFormControl(1000));//删除this.outlayGroup.removeControl('game');//声明this.outlayGroup.get('other').markAsDirty();this.outlayGroup.get('other').updateValueAndVal身份();}FormArraygetplaintiff(){returnthis.prosecuteForm.get('plaintiff')asFormArray;}addMembers(){this.plaintiff.push(newFormControl(null,[Validators.required]));}添加使用this.plaintiff.push(newFormControl());使用this.plaintiff.at(i)获得;去掉使用this.plaintiff.removeAt(i)更新具体的Control控件,检查和之前的API一样;FormBuilderthis可以创建任意类型的控件,并根据创建的表单类型使用相应的API;如果创建组类型,使用与FormGroup相同的验证,使用单个FormControl直接使用control.markAsDirty();control.updateValueAndValidity();整表校验Verification是将整表逐一校验的过程。一般都是对表单的controls属性的值进行迭代验证。动态表单可能需要迭代嵌套逻辑。outlayGroupSubmit(事件){如果(!this.outlayGroup.valid){constcontrols=this.outlayGroup.controls;for(constkeyincontrols){if(controls.hasOwnProperty(key)){constformField=controls[key];formField.markAsDirty();formField.updateValueAndValidity();}}返回;}//提交到...}