加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

形式在angular2

发布时间:2020-12-17 09:16:47 所属栏目:安全 来源:网络整理
导读:有点混淆如何在angular2 beta中使用Forms(模板或模态驱动froms). 目前我正在使用模态驱动的表单,但在这里得到一些错误是我的form.html: form [ngFormModel]="demo" input type="text" [ngFormControl]="demo.controls['name']" input type="text" [ngFormCo
有点混淆如何在angular2 beta中使用Forms(模板或模态驱动froms).

目前我正在使用模态驱动的表单,但在这里得到一些错误是我的form.html:

<form [ngFormModel]="demo">
        <input type="text"  [ngFormControl]="demo.controls['name']">
        <input type="text"  [ngFormControl]="demo.controls['batch']">
        <div> 
            <input type="radio" [ngFormControl]="demo.controls['radio']" name="status" value="true"> Active
            <input type="radio" [ngFormControl]="demo.controls['radio']" name="status" value="false">Inactive 
        </div>
        <div> 
            <input type="checkbox" [ngFormControl]="demo.controls['checkbox']" name="one" value="one"> one
            <input type="checkbox" [ngFormControl]="demo.controls['checkbox']" name="two" value="two">two 
        </div>
        <select [ngFormControl]="demo.controls['select']">
            <option value="one">Oone</option>
            <option value="two">two</option>
            <option value="three">three</option>
            <option value="four">four</option>
        </select>
        <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal" (click)="demoSubmit(demo.value)">Done</button>
</form>

和form.ts文件在这里:

import {Component,View} from 'angular2/core';
import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder,Control,ControlGroup} from 'angular2/common';
import {ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
    selectro: 'Form',templateUrl: 'src/components/form/form.html',directives: [CORE_DIRECTIVES,FORM_DIRECTIVES],})
export class FormDemo{
    demo:ControlGroup;
    constructor(fb:FormBuilder){
        console.log("Form Called");

        this.demo= fb.group({
            name: ["pardeep"],batch: [],checkbox: [],radio: [],select: []
        })
    }
    demoSubmit (){
        console.log(JSON.stringify(this.demo.value));
    }
}

所以,我的问题是:

>哪种形式是最好的模板或模态驱动,为什么?
>何时使用ngControl以及何时使用ngModal?

PS: – 在这个例子中,我无法得到单选按钮和复选框的值,我做错了什么,在这个例子中我是模态驱动形式从here?

任何好的参考或例子都是受欢迎的.
谢谢.

我猜你的ngModl是指ngModel.

“1 – 哪种形式是最好的模板或模态驱动,为什么?”
来自:http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

要隐式创建新的ControlGroup和Controls,请使用:

ngForm和ngControl

要绑定到现有的ControlGroup和Controls,请使用:

ngFormModel和ngFormControl

基本上一个更方便,但给你少控制,我个人尝试首先使用模板驱动,因为它更简单,代码更少,直到它还不够,然后切换到模型驱动.

2-何时使用ngControl以及何时使用ngModel?

我不知道你是否在这里混合概念,但ngControl和ngModel并不是准确地互相替换,ngModel处理输入组件和域/表示模型之间的同步,而ngControl基于Validators处理表单的状态,肮脏输入等等,更倾向于提供反馈并允许/阻止用户提交无效表单.

那些可以互相替换的是我之前在答案1中提到的那个.

我希望这有助于澄清一点点?

至于复选框和无线电的值,你只有ngFormControl,添加ngModel将它们的值映射到你的模型.再次引用同一页面:

<input type="text" id="productNameInput" placeholder="Product Name" [ngFormControl]="myForm.find('productName')" [(ngModel)]="productName">

你可以看到他正在使用ngFormControl和ngModel.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读