带特殊符号的Angular 2+ ngModel变量
Angular 2+中的ngModel变量是一个特殊符号，它用于实现双向数据绑定。ngModel是Angular框架中的一个指令，它允许将表单控件的值与组件中的变量进行绑定，实现数据的双向同步。
ngModel的主要作用是在表单控件和组件之间建立一个数据通道，使得表单控件的值能够自动更新到组件中的变量，同时也能将组件中的变量的值自动更新到表单控件上。这样，无论是用户通过表单控件输入数据，还是通过组件中的逻辑修改变量的值，都能够实时反映在另一方面。
ngModel的优势在于简化了数据绑定的过程，使得开发者无需手动编写大量的事件监听和数据更新的代码。通过ngModel，开发者只需要在模板中使用[(ngModel)]语法将表单控件与组件中的变量进行绑定，Angular框架会自动处理数据的同步。
ngModel的应用场景非常广泛，适用于各种表单输入控件，如文本框、复选框、单选框、下拉框等。它可以用于用户登录、注册、数据编辑等场景，以及各种需要实时更新数据的场景。
对于腾讯云相关产品，推荐使用腾讯云的云开发服务。云开发是一套面向开发者的后端云服务，提供了云数据库、云存储、云函数等功能，可以帮助开发者快速搭建和部署应用。通过云开发，开发者可以方便地将Angular应用与腾讯云进行集成，实现数据的存储和处理。
腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
我在angularjs中使用过ng-bind，如下所示
<div ng-bind="getVal()"></div>
其中getVal()返回一些值，它在控制器中。但是在Angular2中，我在组件中有一个函数getVal()，我需要像angular1一样从模板中调用它。
我试过了
<div [(ngModel)]="getVal()"></div>
但不走运，你知道吗？
浏览 3提问于2016-01-14得票数 41
回答已采纳
已更新HTMLTextAreaElement值属性，但未更新ngModel。
我注意到在angular中有一个ng-model-options。
为了更新ngModel，我需要在选项中指定什么吗？
target: HTMLTextAreaElement = null;
appendToTarget(specialCharacters: UnicodeCharacter) {
this.target.value = this.target.value.concat(specialCharacters);
}
浏览 5提问于2017-08-02得票数 0
我已经构建了两个组件:注册和注册表单。
。
在填写表单并单击Submit按钮后，我得到：
我找遍了所有有类似问题的问题，但没有一个问题能帮我解决问题。
Signup.component.html具有注册表单组件：
(...)
<app-signup-form></app-signup-form>
(...)
Signup-form.component.html
<form [formGroup]="mysignup">
<div class="form-group">
Name:<
浏览 1提问于2018-06-28得票数 2
回答已采纳
2回答
我是Angular 8的新手，一直在尝试使用*ng-if和双向绑定。它没有像预期的那样运行：
模板文件：
<label class="radio-inline">
<input type="radio" name="optradio" value="true" [(ngModel)]="socialClass" >Rich
</label>
<label class="radio-inline">
<
浏览 9提问于2020-06-03得票数 0
我有两个带ngmodel的单选按钮。使用xls在typescript文件中初始化downloadVal。因此，默认情况下，当页面加载时，应该选择xls选项
<fieldset>
<label for="downloadxls"></label>
<input id="downloadxls" name="downloadVal" [(ngModel)]="downloadVal" type="radio" value="xls" aria-
浏览 1提问于2018-06-06得票数 0
2回答
我很喜欢Angular 6，但我很难根据用户点击的单选按钮来显示div
这是我的无线电表单：
<form>
<input type="radio" name="job" [(ngModel)]="model.job" value="manager">Manager
<input type="radio" name="job" [(ngModel)]="model.job" value="employee
浏览 6提问于2018-11-01得票数 0
我在找带管子的产品。管道在product.component.html中工作(ngModel)，而在app.component.html中不工作(ngModel)。
产品-find.pipe.ts：
import { Pipe, PipeTransform} from '@angular/core';
import { Product } from './product/product';
@Pipe({
name: 'productFind'
})
export class ProductFindPipe implements Pipe
浏览 0提问于2018-07-09得票数 0
回答已采纳
我正在致力于将一个大型AngularJS应用程序升级到Angular 5+。这意味着在混合AngularJS应用程序中使用新的Angular 5组件。在许多情况下，表单嵌套在其他表单中。旧的AngularJS代码的父表单如下所示： export default function PersonDirective() {
return {
restrict: "E",
template: `
<div ng-form="personForm">
<
浏览 31提问于2020-04-23得票数 3
我从这里举了个例子：和get errors:没有针对ngModel和ngForm的指令。似乎没有包含指令。
ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "NgForm" ("<form (ngSubmit)="onSubmit(f)" [ERROR ->]#f="NgForm" novalidate> <input name
浏览 4提问于2017-05-03得票数 0
嗨，哪个更好？有什么关系？优点和缺点是什么？
以下是两者的比较代码：
作用域：{ ngModel:'=‘}
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="app">
<input ng-model="code"></my-di
浏览 1提问于2016-06-03得票数 5
回答已采纳
1回答
我正试图在angular6中做一个过滤管。到目前为止我得到了这个：
search.component.html：
<input class="form-control" [(ngModel)]="searchService.query.title" name="title">
search.component.ts：
import { Component, OnInit } from '@angular/core';
import { SearchDataService } from './search-dat
浏览 0提问于2018-05-21得票数 0
回答已采纳
1回答
我正在尝试创建一个ui，该ui使用包含属性和验证等的模式对象生成。因此，我需要使用指令在ui控件上设置ngModel。ngModel的值是一个字符串，它表示作用域上的架构对象上的属性路径。
对于标准输入，我可以这样做，但是当使用角度ui数据报警器时，我会得到以下错误。
Error: [$compile:ctreq] Controller 'ngModel', required by directive 'myModel', can't be found!
http://errors.angularjs.org/1.2.10/$compile/ctreq?
浏览 4提问于2014-03-17得票数 1
回答已采纳
2回答
我对角很陌生，有点不知所措。
据我所知，我有一个组件，可以在其中显示像{{ this }}这样的数据，它工作得很好。现在，我想选择component.ts中的数据。它是一个字符串数组：
private strategies: string[] = ["ASAP", "W&T"];
现在，在我的component.html中，我想用这些字符串作为选项创建一个select。
<select ngModel="result" ngOptions="value for value in strategies">
<
浏览 0提问于2019-03-05得票数 3
回答已采纳
我从我的angular6开始，我遇到了下面的语法。
<input type="text"
class="form-control"
name="company-name"
ngModel
#nameField="ngModel"
required
minlength="3">
现在我的问题是，如果ngModel和name已经存在来唯一地标识表单组件，而ngModel指令将其与angular表单绑定在一起，为什么我们还需要#nameField="
浏览 5提问于2018-08-07得票数 2
回答已采纳
我是Angular2的新手，当我浏览Angular2上的博客时，我遇到了NgModel和ngModel。我知道[(ngModel)]用于双向绑定。有人能解释一下两者的区别吗？
浏览 1提问于2016-10-05得票数 2
回答已采纳
我正在创建一个角2简单的CRUD应用程序，允许我的CRUD产品。我试图实现post方法，这样我就可以创建一个产品。我的后端是一个ASP.NET Web。我遇到了一些问题，因为当将Product转换为JSON时，它没有正确地执行它。预期的JSON应该如下所示：
{
"ID": 1,
"Name": "Laptop",
"Price": 2000
}
但是，从我的应用程序中发送的JSON如下：
{
"product":{
"Name":"Laptop"
浏览 5提问于2016-07-14得票数 67
回答已采纳
My ngModel myOpt2在选中时不会更改，如果有效，则为myOpt。它没有改变的原因是什么？
Mi ngModel myOpt2 no cambia ser seleccionado，myOpt si functiona.你是不是不在这里呢？
var app = angular.module('App_Alta', []);
app.controller('Ctrl_Categorias', function ($scope, $http) {
$scope.lstCatalogos = [{ sNombre: "Vehícul
浏览 16提问于2018-08-01得票数 1
1回答
我使用的是angular 5.0.5的Meteor。Meteor使用websocket。
我经常遇到这样的情况:从服务器加载数据，更新组件字段，但在我单击任意位置之前，view(dom)仍然没有反映更改。
我读过关于变化检测和角度区域的文章。即使在更新字段后，使用this.zone.run(() => {...variable gets updated here})调用了ChangeDetectorRef.detectChanges、ChangeDetectorRef.markForCheck、ApplicationRef.tick或角度区域中的更新字段，视图也会进行更新
有什么方法可以
浏览 5提问于2018-03-10得票数 0
我正在创建一个自定义指令，该指令采用一个简单的模板，包括输入类型textarea，将ng-模型分配给ngmodel，并在其中创建一个指向更改事件的链接函数，其中我试图获取ngmodel值，但它的打印未定义的，请帮助我解决这个问题，在这里，如果需要的话，请张贴我尝试修改的链接，代码从这里开始。
// Code goes here
var app = angular.module('myApp',[]);
app.directive('markdownEditor', function () {
return {
restrict: 'E
浏览 5提问于2016-02-02得票数 1
我有一个双向数据绑定和Angular 8的问题 在下面的示例中，我的模型(service.formData)被填充，但其中一个变量(实际上是子表)为null(service.formData.ProjectSshaspModel)。如果我在数据库中填充数据，则双向绑定似乎工作正常，并检索和传回数据。但是，当页面加载时变量为null，并且我填充了模型(HTML页面)时，对象似乎没有被填充 我已经将HMTL、Angular双向数据绑定和JSON值放在下面。如果可能的话，请帮忙。谢谢 <form #form="ngForm" autocomplete="off
浏览 47提问于2020-03-25得票数 0
回答已采纳
2回答
我正在尝试运行Angular的ui网格，并使用以下代码：
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {RouterModule} from "@angular/router";
import {BosOverviewComponent} from "./bosoverview.component";
import {UiGridModule} from '
浏览 4提问于2017-06-13得票数 3
我正在学习angular，我来自jQuery背景，面临着抓住angular的难题。因此，我经常在理解angular代码中的许多东西时遇到困难。
刚刚看了下面的代码，我不明白下面的指令中的作用域是做什么的？
但是如果我从下面的指令中删除作用域，那么什么将不起作用？所以如果可能的话，请用一个例子帮助我理解作用域的用法和它的重要性。谢谢
<li my-directive price="item.price" ng-repeat="item in products">{{item.name}} — {{item.price}}</l
浏览 1提问于2016-04-10得票数 2
当嵌套子窗体无效时，我要禁用父窗体上的按钮。
这是父窗体组件：
<hello name="{{ name }}"></hello>
<h2>Complex form with address component</h2>
<form #myForm="ngForm">
<div>
<label>Firstname:</label>
<input type="text" name="firstName" ngMo
浏览 0提问于2021-04-28得票数 0
1回答
我试图用ngModel将输入的值从html传递到ts文件。但我犯了个错误。这是我的代码、错误和版本。
signup.html
<ion-content padding>
<ion-label color="black" stacked>Ad - Soyad</ion-label>
<ion-input type="text" id="name_surname" [(ngModel)]="name" name='name'></ion-input>
<
浏览 1提问于2018-06-14得票数 0
回答已采纳
Angular 2 ngModel指令使用变量和函数，如
<input [ngModel]="myVar" (ngModelChange)="myFunc($event)" />
我想使用BehaviorSubjects而不是变量和函数
<input [ngModel]="mySubject | async" (ngModelChange)="mySubject.next($event)" />
有没有一种安全的方法来扩展ngModel或使用某种宏来减少模板中的重复？
<input [myNewNgM
浏览 0提问于2016-08-09得票数 26
回答已采纳
1回答
我有一台带ngModel的ion-input。我试图通过(input)事件打印输入的值，但是，变量不会立即打印新值。当我按下屏幕的其他部分时，它会打印值。你知道为什么吗？
<ion-input type="number" (input)="change()" [(ngModel)]="value"></ion-input>
{{value}}
编辑：
value: any;
constructor(public navCtrl: NavController) {}
change() {
console.lo
浏览 0提问于2017-02-16得票数 0
2回答
我有一个问题与双向绑定时间输入。我找不到一种方法来完成这件事。
下面是plnkr中的一个示例
下面是我的代码：
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
Date: <input [(ngModel)] = "date"/>
Time: <input type="time" [(valu
浏览 4提问于2016-04-23得票数 1
在我的Angular 2项目中有一个ngModel，但单选按钮没有选中它
<input type="radio" id="user" name="user" value="RETAIL" [(ngModel)]="myRadio" check>
但是当我切断ngModel时，它会检查
<input type="radio" id="user" name="user" value="RETAIL check>
但是我不能剪切它，因为我需要
浏览 0提问于2017-12-22得票数 3
回答已采纳
之后将angular 5升级到6
我尝试更新我的表单：
我有一个anguar 5：
<select [ngModel]="toto" (ngModelChange)="onChange($event)"
<option *ngFor="let toto of totos" [ngValue]="toto.id">{{toto.libelle}}</option>
</select>
angular 6我更新了：
<select #oldValue=
浏览 0提问于2018-05-23得票数 4
抱歉，正如我提到的那样。我是angular 6的新手。我看过这个链接，当我在angular 6中尝试这样做的时候，我卡在了中间，因为他们说"Add dependency to timeline your angular ：ngTimeline“，这意味着是哪一个？
我安装了angular-timelinejs3。添加css和javascript到index.html.When我放置指令:在app.component.html.And中我如何导入角度的ng-timeline js3我得到了error.Template解析error.can任何人请在这方面帮助我？
In Index.
浏览 5提问于2018-07-30得票数 0
在我缓慢地寻求理解，角度等，我有一个错误，从我的可视化工作室代码编辑器，似乎不影响应用程序的功能。
当我悬停在Html模板中的一个变量上时，我收到了这个弹出窗口
我的html模板充满了与产品对象product.ETC相关的错误.
有人能为我指明正确的方向来理解如何破译这个。
product-form.component.html
<div class="row">
<div class="col-md-6">
<form #form="ngForm" (ngSubmit)="sav
浏览 4提问于2017-11-23得票数 5
回答已采纳
我正在尝试转换一个字符串日期，这样它就可以在类型设置为' date‘的html输入上工作。
因此，我有以下angular应用程序：
(function() {
var app = angular.module('test', []);
app.controller('MainCtrl', function($scope) {
$scope.load = function() {
$scope.message='2017-12-23T00:00
浏览 20提问于2017-12-22得票数 1
回答已采纳
我正在尝试从一个使用angular的HTML5日期输入的现有表单中计算年龄。优选地，用户不必点击任何东西来生成它。
我目前可以获取日期，但格式似乎破坏了我的代码。有没有一种方法可以让它工作(改变格式)，或者一种更有效的新方法？
任何帮助都将不胜感激。
HTML：
<input type="date" name="dob" [(ngModel)]="birthdate">
<button (click)="getAge()">Get Age</button>
<input type="
浏览 0提问于2018-03-27得票数 0
我试图用Angular.JS创建一个简单的表单，学习如何使用这个框架。当我将(ngModel)添加到我的第一个表单输入时，我会丢失所有的HTML。当我取出它(ngModel)时，所有的html都会返回。这是我的代码：
app/user.ts
export class User {
constructor(
public firstname: string = "",
public lastname: string = "",
public email: string = "",
public password:
浏览 3提问于2017-09-01得票数 1
回答已采纳
1回答
如何将复选框值替换为布尔值-角5
、、、、
我有一个模板驱动的表单：
<form #form="ngForm" (submit)="submitForm()" novalidate>
<div class="form-group" [class.has-error]="linkName.invalid">
<label class="control-label" for="name">Name</label>
<input #linkName=
浏览 1提问于2018-04-05得票数 0
回答已采纳
1回答
我有一个新的角度计划，我用：
ng new "app-name"
我试图使用ngTagsInput作为标记输入框，但是每次构建和运行我的应用程序时，我的浏览器控制台中都会出现一个错误：
ReferenceError: angular is not defined
好像是从ng标签-input.js发出的。这东西怎么回事？
编辑:我也尝试过使用
npm install ng-tags-input@3.2.0 --save
然后在我的app.module.ts中使用
import { NgTagsInput } from 'ng-tags-input';
这似乎也
浏览 2提问于2017-11-30得票数 0
回答已采纳
我是Angular 2的新手，想知道我们是否可以在单个angular 2组件中有两种形式。下面是我的form.component.html的样子。
<div>
<span>Forms Using ngModel Directive</span>
<form #form="ngForm" (ngSubmit)="submit(form.value)">
<div>
<label>Firstname:</label>
<input type="
浏览 2提问于2017-03-16得票数 1
2回答
我注意到在我的角度应用中
[(ngModel)]="this.properties.offerValue"和[(ngModel)]="properties.offerValue"
他们两人的工作似乎是一样的，我的好奇心提出了一个问题，有什么区别，哪一个是正确的用法。
浏览 0提问于2018-08-21得票数 3
回答已采纳
我正在做一个应用程序，并使用Angular/ionic，我试图放置Facebook提供商，但我得到了这个错误： Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [..., ..., ..., ?[object Object]? 我的app.module： import { NgModule } from '@angular/core';
import { BrowserModule } fro
浏览 7提问于2020-08-24得票数 1
这是html <input type="text" [(ngModel)]="name" />
<button (click)="addtext()">add</button> 这是ts import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-post",
templateUrl: "./post.component.html",
styleUr
浏览 11提问于2020-07-01得票数 0
2回答
我使用的是角10，并试图将登录表单的元素绑定到视图模型，但它似乎没有更新。它保持在缺省初始值。我做错了什么？
login.component.html
<div>
<form #loginData="ngForm" (submit)="doLogin()">
<input type="text" [(ngModel)]="loginData.Username" [ngModelOptions]="{standalone: true}">
&
浏览 8提问于2020-10-08得票数 0
回答已采纳
1回答
我已经做了一个定制指令，并且使用了ng模型，但是当模型更新时，即使我在观察事件，指令也不会。下面是代码：
angular.module('Directives').directive("customDirective", ['$window', function ($window) {
return {
restrict: "E",
require: 'ngModel',
scope: {
ngModel: '=',
},
link: fun
浏览 1提问于2015-06-16得票数 3
回答已采纳
我正在测试floatingLabel ()，但使用ngModel时，标签与内容重叠
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-textbox-container floatingLabel="First name">
<input kendoTextBox [(ngModel)]="value"/>
<
浏览 3提问于2017-10-11得票数 0
3回答
这里我提到了我的html和component.ts。
我的问题是这个吗？
在这里，从数据库中填充orginal 和Open 汽车。支付是输入字段。
当用户输入付款金额时。支付金额和未结算余额应用余额应显示在余额到期栏中的原始金额加减。
这个计算应该在提交操作之前执行，我不知道怎么做
<table style="width:100%; text-align: center ">
<tr>
<th style="width: 40%">DESCRI
浏览 0提问于2018-05-08得票数 0
我的Access DB中有这个错误。假设我有一个名为ComboAreaProgetto的表单，它有一个名为textboxArea的文本框和一个名为AddButton的按钮。该按钮在单击事件上有一个事件过程，该过程必须将文本框内容添加到表ComboAreaProgetto的字段“Area progetto”中。以下代码如下：
Private Sub AddButton_Click()
Dim strSQL As String
Dim RnDdB As Database
Set RnDdB = CurrentDb
RnDdB.Execute " INSERT INTO ComboA
浏览 3提问于2016-11-09得票数 0
回答已采纳
在Angular(5)中，我试图为模板驱动的表单编写一组可重用的表单控件。它需要能够从父组件中获取模型，并将其传递给元素以进行双向数据绑定。
这就是我所拥有的。
admin-panel.component.ts (父窗体)
import { Component, OnInit } from '@angular/core';
import{ NgForm } from '@angular/forms';
@Component({
selector: 'admin-panel',
template: `
<label>S
浏览 0提问于2018-05-04得票数 0
1回答
我正在将Angular2添加到一个现有的应用程序中，但是在关于RxJS类型的webpack版本中，我遇到了异常。我正在从命令行运行webpack。这里有一个指向存储库的链接。从Phase9文件夹中运行'npm install‘，然后运行'npm start’以重现错误：
ERROR in [default] c:\Dev\angular-upgrade\Phase9\node_modules\rxjs\add\operator\zipAll.d.ts:2:15
Invalid module name in augmentation, module '../../Obse
浏览 3提问于2016-08-18得票数 0
回答已采纳
我已经创建了一个自定义的web组件，我想在我的Angular项目中使用它。但问题是我正在绑定(ngmodel)，它是js的一个属性，所以它将其降低为(ngModel)。由于该角度不能识别并且因此不能绑定它。在这种情况下需要立即帮助。
class FormAngInput extends HTMLElement {
constructor(){
super()
}
connectedCallback() {
var template = `
<style>
.no {
color: green;
}
</style>
浏览 0提问于2019-01-07得票数 0
我正在尝试在Angular2中使用ngModel实现内联编辑。我有一个需要使用ngFor和ngModel迭代的数组。当我尝试对该数组应用内联编辑时，我只能为该数组的每个变量编辑一个字符。
您可以找到一个有效的示例。
下面是我同时使用ngModel和ngFor的组件的代码：
import {Component} from '@angular/core'
import {InlineEditComponent} from './inline.component';
@Component({
selector: 'inline-app',
pr
浏览 22提问于2016-07-06得票数 1
我有一张表格
<form #basic="ngForm">
<div>
<label>Firstname:</label>
<input type="text" name="firstName" ngModel required>
</div>
<div>
<label>Lastname:</label>
<input type="text" name="la
浏览 0提问于2019-06-06得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
