zoukankan      html  css  js  c++  java
  • [Angular 2] The form export from NgFormControl

    In last post, we need to create an instanse variable:

    sku: AbstructControl;

    We can get rid of this by getting the exported form from NgFormControl, what we get is a directive, to get control, we need to call .control:

                <div class="form-group" [class.has-error]="!sku.valid && sku.touched">
                    <label for="skuInput">SKU</label>
                    <input type="text"
                    class="form-control"
                    id="skuInput"
                    #sku = "form"
                    placeholder="SKU"
                    [ng-form-control]="myForm.controls['sku']">
                </div>
    

      

    To use it:

    <div *ng-if="!sku.control.valid"
                   class="bg-warning">SKU is invalid</div>

    Notic, this is only available for the control, not for the from, if we do:

                <div *ng-if="myForm.control.hasError('required', 'sku')">
                    SKU is required
                </div>

    Will cause error.

    Code:

    import {Component, View, FORM_DIRECTIVES, Validators, FormBuilder, NgIf} from 'angular2/angular2';
    
    @Component({
        selector: 'demo-form-sku'
    })
    @View({
        directives: [FORM_DIRECTIVES, NgIf],
        template: `
           <div>
            <h2>Demo Form: Sku</h2>
            <!-- ngForm is attched to the form, and #f="form" form is also come from ngForm-->
            <form [ng-form-model]="myForm"
            (submit)="onSubmit(myForm.value)">
                <div class="form-group" [class.has-error]="!sku.valid && sku.touched">
                    <label for="skuInput">SKU</label>
                    <input type="text"
                    class="form-control"
                    id="skuInput"
                    #sku = "form"
                    placeholder="SKU"
                    [ng-form-control]="myForm.controls['sku']">
                </div>
                <div *ng-if="!sku.control.valid"
                   class="bg-warning">SKU is invalid</div>
                <button type="submit" class="btn btn-default">Submit
                </button>
                <div *ng-if="myForm.hasError('required', 'sku')">
                    SKU is required
                </div>
    
            </form>
            <div *ng-if="!myForm.valid"
                  class="bg-warning">Form is invalid</div>
           </div>
        `
    })
    
    export class DemoFormSku {
        myForm: ControlGroup;

    //sku: AbstractControl;
    constructor(fb:FormBuilder) { this.myForm = fb.group({ "sku": ["", Validators.required] }); this.sku = this.myForm.controls['sku']; } onSubmit(value){ console.log(value); } }
  • 相关阅读:
    jedis 连接 虚拟机内redis服务
    数据库存储过程项目总结
    前端jsp联系项目相关经验
    学习做项目的一些随笔
    循环
    字典
    集合
    元组
    列表
    字符串
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4948863.html
Copyright © 2011-2022 走看看