RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
 自定义提取表单控件
             绿线上是自定义提取的表单控件显示的内容    绿线下是使用自定义表单控件时表单的实时数据  

表单控件的值为:{{myForm.value | json}}

 
 2018-1-31 10:09:17
 提取表单控件
      

outerCounterValue value: {{outerCounterValue}}

        Submit      
  {{form.value | json}}   
   
 2018-1-27 21:51:45
 ngIf指令测试    改变ngif变量       ngif变量的值为true       ngif变量的值为false      2018-1-27 16:58:17  RXJS使用    
测试内容
   2018-1-23 21:14:49  自定义验证器                               登陆      2018-1-23 11:06:01  响应式表单             @163.com                      
  

表单整体信息如下:

  
表单数据有效性:{{testForm.valid}}
  
表单数据为:{{testForm.value | json}}
  
获取单个或多个FormControl:{{testForm.controls['email'] }}
     

email输入框的信息如下:

  
有效性:{{testForm.get('email').valid}}
  
email输入框的错误信息为:{{testForm.get('email').errors | json}}
  
required验证结果:{{testForm.hasError('required', 'email') | json}}
  
minLength验证结果:{{ testForm.hasError('minLength', 'email') | json }}
  
hello:{{ testForm.controls['email'].errors | json }}
     

password输入框啊的信息如下:

  
有效性:{{testForm.get('password').valid}}
  
password输入框的错误信息为:{{testForm.get('password').errors | json }}
  
required验证结果:{{testForm.hasError('required', 'password') | json}}
 
 
  获取数据   
data变量:{{data}}
 
   2018-1-22 15:58:43  利用响应式编程实现表单元素双向绑定           
  姓名为:{{name.value}}  
   2018-1-22 11:12:35  -->  模板表单             done       
  

名为desc的表单控件的值为:{{ a.value }}

 
   2018-1-22 10:19:31  md-chekbox的使用    
  测试  
    

测试checkbox被选中啦

     2018-1-18 14:02:20    md-tooltip的使用    鼠标放上去    2018-1-18 14:26:58  md-select的使用       {{taskList.name}}      2018-1-18 14:26:58    ngNonBindable指令的使用    

描述

 

使用了ngNonBindable的标签,会将该标签里面的元素内容全部都看做时纯文本

 

例子

 

  {{taskLists | json }}   ← 这是{{taskLists | json }}渲染的内容  

   2018-1-19 09:34:26

HTML

Angular19 中如何自定义表单控件 

import { Component, OnInit, HostListener, Inject} from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Http } from '@angular/http';
import { QuoteService } from '../../service/quote.service';
@Component({
 selector: 'app-test01',
 templateUrl: './test01.component.html',
 styleUrls: ['./test01.component.scss']
})
export class Test01Component implements OnInit {
 countNumber: number = 9;
 outerCounterValue: number = 5; 
 ngif = true;
 loginForm: FormGroup;
 testForm: FormGroup;
 data: any;
 name: FormControl = new FormControl();
 desc: string = 'hello boy';
 taskLists = [
 {label: 1, name: '进行中'},
 {label: 2, name: '已完成'}
 ];
 constructor(
 private formBuilder: FormBuilder,
 private http: Http,
 @Inject('BASE_CONFIG') private baseConfig,
 private quoteService: QuoteService
 ) {}
 ngOnInit() {
 this.testForm = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.minLength(4)], []),
  password: new FormControl('', [Validators.required], [])
 });
 this.name.valueChanges
 .debounceTime(500)
 .subscribe(value => alert(value));
 this.loginForm = this.formBuilder.group({
  username: ['', [Validators.required, Validators.minLength(4), this.myValidator], []],
  userpwd: ['', [Validators.required, Validators.minLength(6)], []]
 });
 this.quoteService.test()
 .subscribe(resp => console.log(resp));
 }
 onChangeNgifValue() {
 if (this.ngif == false) {
  this.ngif = true;
 } else {
  this.ngif = false;
 }
 }
 @HostListener('keyup.enter')
 onTestNgModelClick() {
 alert('提交');
 }
 onTestClick() {
 // this.data = this.testForm.get('email').value;
 // console.log(this.testForm.getError);
 console.log(this.testForm.controls['email']);
 }
 onTestLogin() {
 console.log(this.loginForm.value);
 if (this.loginForm.valid) {
  console.log('登陆数据合法');
 } else {
  console.log('登陆数据不合法');
  console.log(this.loginForm.controls['username'].errors);
  console.log(this.loginForm.get('userpwd').errors);
 }
 }
 myValidator(fc: FormControl): {[key: string]: any} {
 const valid = fc.value === 'admin';
 return valid ? null : {myValidator: {requiredUsername: 'admin', actualUsername: fc.value}};
 }
}

3.6 初始化效果展示

Angular19 中如何自定义表单控件 

上述就是小编为大家分享的Angular19 中如何自定义表单控件了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


网页标题:Angular19中如何自定义表单控件
当前地址:http://scpingwu.com/article/gsgjsd.html
Top