zoukankan      html  css  js  c++  java
  • ng2——表单提交

    angular作为前端框架当然离不开htmlform表单,下边是我在学习的过程中对ng2表单中的应用

    首先是声明一个类

    export class Hero {
      constructor(
        public id:number,
        public name:string,
        public power:string,
        public alertEgo?: string){ }
    }

    然后定义组件,且定义组件内需要使用的数据模型对象

    /*index.ts*/
    import {Component} from '@angular/core';
    import {Hero} from '../../hero';
    
    @Component({
      selector:'test-form',
      templateUrl: 'app/pages/forms/index.html'
    })
    
    export class TestForm{
      powerList = ['yi','er','san','si','wu'];
      model = new Hero(123,'happen','yi','testMsg');
    }

    然后是界面

    <form (ngSublime)="onSublime()" #testForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #spy #name="ngModel">
        <!-- 这里#name设置为ngmodel  指令的exportAs属性告诉angular如何链接模板引用变量到指令
      这里是把exportAs属性设置为ngModel -->
        {{model.name}}
        <!-- 该处用于界面内错误信息的认证 -->
        <p [hidden]="name.valid || name.pristine">姓名不能为空</p>
      </div>
      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" name="alterEgo" id="alterEgo" [(ngModel)]="model.alertEgo" class="form-control"> {{model.alertEgo}}
      </div>
      <div class="form-group">
        <label for="power">Power</label>
        <select class="form-control" id="power" name="power" [(ngModel)]="model.power" required>
          <option *ngFor="let item of powerList" [value]="item">{{item}}</option>
        </select>
        {{model.power}}
      </div>
      <div class="form-group">
        <!-- 该处通过表单的验证来判断提交按钮的现实隐藏 -->
        表单是否可以提交{{testForm.form.valid}}
        <button type="submit" [disabled]="!testForm.form.valid">Submit</button>
      </div>
    </form>
  • 相关阅读:
    Qt生成随机数
    Qt调用系统DLL,判断网络连接状态
    Qt操作sqlite数据库
    Qt 操作注册表
    vs报错:RC1004 unexpected end of file found
    Qt操作ini文件
    Django Admin:自动选择当前用户
    BSTR转QString
    vue-cli4,vue3打包后页面无内容
    Qt 5.12.10 国际化
  • 原文地址:https://www.cnblogs.com/happen-/p/6402090.html
Copyright © 2011-2022 走看看