错误:如果输入使用双向绑定，则“type”属性不能是动态的
基础概念
在前端开发中，双向绑定是一种数据绑定技术，它允许数据模型和视图之间的自动同步。这意味着当数据模型的值发生变化时，视图会自动更新，反之亦然。type属性通常用于指定HTML元素的类型，例如<input type="text">。
问题原因
当使用双向绑定时，如果type属性是动态的（即它的值在运行时可以改变），可能会导致一些问题：
- 浏览器兼容性问题：不同的浏览器可能对动态改变
type属性的支持不同，可能会导致不可预测的行为。 - 安全性问题：某些
type属性的值可能会被浏览器以不同的方式处理，这可能会引入安全漏洞。 - 性能问题：频繁地改变
type属性可能会导致性能下降，因为浏览器需要重新解析和渲染元素。
解决方法
为了避免这些问题，可以采取以下几种方法：
- 静态
type属性：如果可能，尽量使用静态的type属性值。 - 条件渲染：根据条件渲染不同的元素，而不是动态改变
type属性。
示例代码
假设我们有一个输入框，其类型需要根据某个条件动态改变：
<!-- 不推荐的方式 -->
<input [type]="inputType">为了避免这个问题，可以使用条件渲染：
<!-- 推荐的方式 -->
<div *ngIf="inputType === 'text'">
<input type="text">
</div>
<div *ngIf="inputType === 'password'">
<input type="password">
</div>应用场景
这种技术通常用于表单验证、用户输入处理等场景，其中输入框的类型可能需要根据用户的操作或数据模型的状态进行动态调整。
参考链接
通过以上方法，可以有效避免在使用双向绑定时动态改变type属性所带来的问题。
相关·内容
1回答
在WebService中，我必须输入一个输入，它表示下拉列表.这个下拉列表中有两项：Yes或No。
例如，当我选择项目YES时，我单击Confirm。
在浏览器GoogleChrome > Network > Payload中，变量为空。我不检索选定的值。
我不知道问题出在哪里因为我没有错误信息..。-S
在HTML中
<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && submit()">
<div class="row
浏览 1提问于2022-04-13得票数 -1
回答已采纳
1回答
我在输入元素上应用日期管道
<div class="section">
<h6 style="font-weight:bold">From Date</h6>
<input [(ngModel)]="Schedule.FromDate | date:'fullDate'" type="text" class="datepicker">
</div>
但是它不起作用，经过一些搜索后，我在堆栈溢出上找到了一个帖子，并将其更改为
&
浏览 0提问于2018-05-01得票数 1
1回答
我有一个动态创建的离子输入控制。
下面有一个按钮点击那个按钮，我会打开扫描仪并读取条形码。我希望这个条形码出现在我动态创建的离子输入上。
<input *ngSwitchCase="'textbox'" [formControlName]="question.key"
[id]="question.key" [type]="question.type">
<button type="button" ion-button (click)="Scan"
浏览 4提问于2017-11-16得票数 1
我有一个gridview，它的sqldatasource包含7个值。gridview datakeynames是equipment_ID，其余是常规字段。
我试图在e.values("BME_No")中使用gridview_rowdeleted，但它是空的。同时，e.values("equipment_name")是满的，e.values.count显示values是5，values应该是6，不包括datakeyname equipment_ID。
在这里的文章中，{没有提供url }，我看到datakeynames被排除在values之外。另一方面，BME_N
浏览 2提问于2012-07-02得票数 1
我在angular中创建了一个模板驱动的表单。在一个输入域的表单中，我从另一个组件获取值。并且我已经将该值赋给了输入字段。我也创建了模型。现在我需要在点击ok按钮后访问该值。在控制台中，我得到的值是空值。如何获得动态值。请帮个忙
form.html
<form name="form" #f="ngForm" class="form-horizontal">
<div class="form-row">
<label>Remaining q
浏览 0提问于2019-09-20得票数 0
3回答
代码
考虑以下聚合物自定义元素：
<dom-module id="test-element">
<template>
<input type="text" value="{{value}}">
<button>Reset</button>
</template>
<script>
Polymer({
is: 'test-element',
properties: {
'value
浏览 2提问于2015-06-15得票数 13
回答已采纳
6回答
我有一个HTML输入字段。
<input
[(ngModel)]="item.value"
name="inputField"
type="text"
/>
我想格式化它的值并使用一个现有的管道：
....
[(ngModel)]="item.value | useMyPipeToFormatThatValue"
....
并获得错误消息：
不能在操作表达式中有管道。
在这种情况下，我如何使用管道？
浏览 7提问于2016-09-22得票数 184
回答已采纳
假设我有5个动态创建的文本框。所有字段都具有默认值，这些字段来自数据库并绑定到输入字段。
<html>
<div data-ng-repeat="Input in InputArray">
Input Field
<label>{{$index + 1}} : </label>
<input type="text" data-ng-model="Input.InputValue" data-ng-change="" />
</div>
浏览 1提问于2015-09-08得票数 0
在常规形式中，当单击reset类型按钮(<button type="reset">Reset</button>)时，除readonly或disabled外，所有输入控件都将被清空。
在使用angular构造表单时，我有
<input type="text" id="district" disabled="" ng-model="address.district" />
在这种形式中，当单击reset按钮时，即使将输入标记为disabled或readonly，也会删除上面输入中的
浏览 1提问于2014-07-02得票数 0
回答已采纳
2回答
我想在DevExtreme数据网格中使用CSwitch。有了DxSwitch，一切都能正常工作，但我不能让它在CSwitch上工作。我想，我使用了错误的绑定，不是吗？ <template #width-settings="cell">
<div>
<DxSwitch v-model="cell.data.data.width.set" /> <!-- WORKS -->
<input type="checkbox" v-model="cell.
浏览 25提问于2020-03-23得票数 0
1回答
我有一个输入列表，这些输入被绑定到组件中的一个对象。我希望能够更改输入框中的值，并让它们在关联对象中更改--目前它们不是。
这是我的档案：
home.component.ts
export class HomeComponent implements OnInit, OnDestroy {
consumerProfile = {
'firstName': 'Joe',
'lastName': 'Soap',
'gender': 'Male',
'prof
浏览 0提问于2018-05-02得票数 1
回答已采纳
我是在角5中绑定模型属性的输入元素。
<input [(ngModel)]="MB.YearOfOperation | date: 'dd-MMM-yyyy' " type="text" class="form-control">
使用日期管道格式化其值，但会产生错误。
不能在第33列的动作表达式中有管道。
所以我尝试了下面的方法(ngModelChange)
<input [(ngModel)]="MB.YearOfOperation | date: 'dd-MMM-yyyy'
浏览 0提问于2018-08-11得票数 2
我有一个带有一些输入的表单，我提交表单并以一个模式显示数据。它可以工作，但我不确定我这样做是正确的，而且代码看起来很混乱。
--这是的样子(为了简单起见，没有模型)：
<div id="app">
<form @submit.prevent="getValues">
<label>Last Name: </label><input type="text" name="lastName">
<br>
<button>Sub
浏览 7提问于2020-02-10得票数 2
回答已采纳
我在ASP.NET中有一个动态网格，只要单击搜索按钮，就会使用Knockout.js获取数据。加载网格后，用户可以单击任意行，在弹出窗口中检查与该行相关的详细信息。
我在这里要实现的是，一旦单击搜索按钮并加载网格中的数据，就应该将焦点设置为第一行，并输入键应触发单击事件(就像鼠标单击时显示弹出的情况一样)。
提前谢谢！！
注意:使用Knockout js和jquery在asp.net中获取和绑定数据。
浏览 4提问于2015-03-17得票数 1
回答已采纳
我只是偶然发现了一个令人痛苦的发现，即如果您将值绑定到输入的属性，ngModel将无法识别它们，最明显的错误是它抛出关于需要name属性或将ngModelOptions设置为standalone的错误。我在github上看到了一个关于这个问题的页面，但在2016年，评论停止了。到目前为止，他们的解决方案是让输入成为独立的，它将被排除在整个表单之外，这不是我想要做的。据我所知，[attr.name]="..." [attr.id]="..."是绑定属性值的唯一方法。
对于Angular来说，作为一个平台，你不会期望像属性绑定这样的东西会停止你的整个工作流程，并需要
浏览 0提问于2017-10-08得票数 1
我想知道如何从组件内部动态地编辑组件属性。代码可能会帮助您更清楚地了解我想要做的事情。
模板/板.
<div>
{{board-component title='Title that wants to be dynamic'}}
</div>
元件/板-组件
{{#if isEditing}}
<div>
<input type="text" value={{title}}>
</div>
{{else}}
<div>
{{title}}
<
浏览 2提问于2016-08-04得票数 1
回答已采纳
1回答
我想在选择一个特定类别之后加载多个子类别，但是如果我在子类别字段的i中使用了数据，那么数据就不会被加载，如果我删除了i，那么它就会正确加载，但是如果我输入了离子输入，那么它会加载所有的离子输入，而且数据也不会被正确地保存，因为它不是一个数组。
这是加载数据的选择。
<ion-select
[(ngModel)]="selected_option"
(ionChange)="optionChanged()"
interface="popover"
>
<ion-select-option
value=
浏览 1提问于2021-10-14得票数 0
我尝试同时使用滑块和输入类型number。我在运行时创建对象，所以我想只在DOM中创建对象。如果我更改滑块的值，输入将获得相同的值，但反之亦然。并且在开头的输入数字中也没有值。
..
*ngFor="let vk of selectedVK"
..
<div class="row">
<div class="col-md-7">
<input
type="range"
ngModel
浏览 6提问于2018-02-04得票数 0
2回答
我使用属性绑定来动态地设置输入的值，它被正确地显示，但是当表单提交时，值是未定义的。
我用的是角8。
<input type="number" [name]="x" [value]="expression" ngModel/>
同样，该值在HTML中正确显示。提前感谢！
浏览 2提问于2019-10-19得票数 1
我有下面的模型
export class Items {
items: Map<string, string>;
createdBy: string;
deliveredBy: string;
}
我希望基于数组中的项动态创建输入字段，而我无法理解如何在这些字段中填充数据。
<form>
<tr>
<td *ngFor="let item of myStringArray">
Map {{item}}<input name="value" ([ng
浏览 2提问于2021-02-18得票数 2
回答已采纳
我正在尝试向我的angular应用程序添加验证器。我可以在输入上很好地设置它们，但是一旦我尝试将值绑定到指令，它就不起作用了。
directives.directive('text', function() {
return {
restrict: 'AE',
require: '^parentForm',
scope: {
formField: "=",
modelField: "=",
onChange: '&',
浏览 0提问于2015-02-03得票数 0
5回答
我使用以下方法将值放置在输入字段中。
<input matInput placeholder = "ProductName" [(ngModel)]="orderLine.productname">
但是，有时值可能为空。在打问号的时候？下面，我们收到以下错误，有人如何在输入中放置可能的空空值，或者不可能？
<input matInput placeholder = "ProductName" [(ngModel)]="orderLine?.productname">
‘？’运算符不能在[orderLine
浏览 1提问于2019-11-27得票数 1
回答已采纳
在文本输入字段中粘贴了一些内容后，我正在尝试获取其中的内容。如何获取数据？我对keyup事件使用的$event.target.value方法不起作用。如果你用Ctrl + V粘贴一些东西，由于keyup事件，它可以工作，但是如果我试图从浏览器的上下文菜单中粘贴一些东西，它不能工作。
下面是一个非常简单的代码示例：
@Component({
selector: 'my-app',
template: `<input type="text" [ngModel]="value" (paste)="pasteEvent($event
浏览 0提问于2017-10-10得票数 5
回答已采纳
1回答
我有一个标准的登录表单，它有2个编辑文本(一个用于电子邮件，另一个用于密码)和一个登录按钮。
当用户单击登录按钮时，我想向服务器发送电子邮件和密码。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
浏览 0提问于2017-07-05得票数 1
回答已采纳
1回答
我有一个指令HTML模板，如下所示：
textinput.html
<label for="{{name}}">{{label}}</label>
<input type="{{type}}" placeholder="{{placeholder}}" id="{{name}}" ng-model="{{name}}">
标签输出正确，但是输入字段内的所有内容都输出为静态{{varname}}
如果我像这样删除ng-model：
<input type="{{typ
浏览 1提问于2015-04-23得票数 1
我在JS中定义了我的模型如下：
$scope.requirement = {
id: function() {
if($scope.dada || $scope.lala) {
return $scope.dada
}
return $scope.haha
}
}
变量是无稽之谈，但假设它们是定义的(在我的情况下，这只是一个例子)。
然后在带有角指令的HTML中，我有一个输入，如下所示：
<input type="text" ng-model="requirement.id" placeholder="
浏览 2提问于2015-12-04得票数 1
回答已采纳
我有点困惑，一些教程使用#来获取输入，而另一些则使用[(ngModel)]。两者之间的有效区别是什么？
浏览 1提问于2017-04-05得票数 18
回答已采纳
1回答
我在xaml中有一个textBox。
但我在导航到其他页面时收到此消息。
当输入、焦点和丢失焦点时，textBox被动态监控。
(检测是否包含文本并更改文本颜色。)
一切都很正常，我不知道异常做了什么。
这是textBox xaml
<TextBox Name="SearchBox" TextChanged="OnTextChanged" Height="72" InputScope="Search" GotFocus="OnGotFocus" KeyDown="OnKeyDown" Lost
浏览 0提问于2013-02-03得票数 3
回答已采纳
该指令似乎是替换模板，然后运行信任资源函数，后者更新源，然后再次更新模板，然后陷入循环。但这是推荐的方法？？html：
<player videos='[{"type":"mp4","src":"http://vjs.zencdn.net/v/oceans.mp4","poster":"http://www.videojs.com/img/poster.jpg","captions":"http://www.videojs.com/vtt/captions.vt
浏览 2提问于2015-01-30得票数 0
回答已采纳
我有两个输入字段，当我在输入字段1 (dummy1)中输入任何数字值时，它应该更新输入字段2 (dummy2)。一旦更新了输入字段2，就应该触发successMessage()。但这是不可能的。输入2(dummy2)中的值正在发生变化。但是没有触发successMessage()函数。我认为(ngModelChange)会触发这个函数，因为dummy2值是在updateDummy2()函数中更新的。当successMessage()值被dummy1更新时，请告诉我是否有任何方法调用dummy1函数。
Component.html
<div id="dummyWrapper"
浏览 2提问于2022-10-19得票数 0
我们正在进行一个角度项目，其中有一个组件，它生成一个通过getter加载的列表，该列表生成使用ngModel指令的输入。每次我们更改输入中的值时，都会因为某种原因重新评估项目列表，并重新划分我们不想要的组件。
下面是一个展示这种行为的例子。
import {NgModule,ChangeDetectionStrategy,Component,OnChanges,SimpleChanges,Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
impo
浏览 2提问于2017-10-12得票数 1
3回答
我目前正在学习如何处理backbone.js。目前，我遇到的问题是，当视图通过用户输入完成时，模型没有更新。
当我更改文本区域的输入并单击按钮时，我发送旧数据，因为视图没有通知模型发生了更改。
我做错什么了？
PostView
define([
'jquery',
'underscore',
'backbone',
'postModel'
], function($, _, Backbone, PostModel){
var PostView = Backbone.View.extend(
浏览 2提问于2014-02-22得票数 1
回答已采纳
我正在创建一个表单组件，它将允许您给出一个值列表，并为列表中的每个值显示input[number]字段。
问题是，它是一个对象列表，而不是数字原语，我需要一种很好的方法来在输入和每个对象中的number属性之间建立数据绑定。
这个number属性将通过我的组件上的scope属性动态设置。
我的数据可能如下所示
$scope.ngModelList = [{foo: 'bar', num: 1}, {foo: 'baz', num: 3}];
我的输入看起来有点像这样
<div class="inputs"
data-ng-repea
浏览 7提问于2016-12-23得票数 2
回答已采纳
假设我想创建一个指令来模拟一个数字输入字段(这样做只是为了从总体上了解指令)
因此，我创建了一个如下指令
angular.module('myApp')
.directive('inputNumber',function(){
return {
replace: true,
restrict: 'E',
scope: {
label: '@',
property:
浏览 1提问于2015-07-11得票数 0
我使用ngModel进行双向绑定(在输入框中显示值，并在用户更改时更新模型的值)，它工作得很好。
<input
id="myInput"
name="myInput"
type="text"
[(ngModel)]="myModel && myModel.myProperty"
/>
从DB获取数据的代码-
this.getresponse$ = this.myService.serviceMethodName.subscribe(
(result: ModelType) =&
浏览 2提问于2020-10-07得票数 0
3回答
我有一个div块，我试图在其中找到被单击的输入元素的名称，然后使用jQuery更新值：
$(document).ready(function(){
$(this).click(function(){
console.log($(this).attr('name'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type=
浏览 0提问于2017-02-10得票数 1
我有一个名为thisUserControl的UserControl，它有两个控件，如下面的XAML代码所示：
<UserControl
...
x:Name="thisUserControl">
<StackPanel x:Name="LayoutRoot">
<Button x:Name="btnChangeString" Content="Change String" Click="btnChangeString_Click" />
浏览 1提问于2012-01-01得票数 0
回答已采纳
4回答
我一直在尝试了解Vue的v-model如何与自定义输入和常规输入组件一起工作。
我见过v-model绑定到组件和模板中的值的示例，这两个值将是不同的。我对此感到非常困惑，我认为这可能是对“双向绑定”的误解。如何将输入绑定到两个值。
示例：
//v-模板中的model
const myCustomInput = ('my-custom-input', {
data() {
return {
myObj: 'hello'
}
},
template: `<input v-model="myObj" >
浏览 2提问于2019-09-16得票数 1
2回答
我是Angular的新手，所以如果我在这里犯了一些新手错误，请容忍我:)我基于一些需要填充的属性动态添加输入(this.properties)，我想将这些动态输入绑定到某个对象(this.selectedProperties = {})，这样我就可以得到如下所示的结果。
this.properties = [new MyData { name = "theName", examples = "theExamples" },
new MyData { name = "anotherName", examples
浏览 0提问于2017-11-30得票数 0
3回答
角度双向数据绑定不工作
、、、
谢谢各位。现在我将选择一个详细的答案并结束这个问题。
请看下面的代码，它非常直接
<tr ng-repeat="record in records track by record.id">
<td><input type="checkbox"/></td>
<td ng-repeat="(name, value) in record" ng-hide="name == 'id'">
<portia-td value="{{va
浏览 1提问于2014-09-04得票数 1
回答已采纳
1回答
我有这样的控制器类
public class Controller{
private final Model model;
@FXML
private CheckBox chbx1;
@FXML
private CheckBox chbx2;
@FXML
private CheckBox chbx3;
public Controller(Model model) {
this.model = model;
}
@FXML
private void initialize(){
chbx1.selectedProperty
浏览 3提问于2018-01-07得票数 0
回答已采纳
2回答
在设置输入收音机和v模型的值时，我遇到了VueJS的问题.我不明白为什么我不能动态地为一个输入设置一个值，并且使用一个模型来检索用户选择的输入。
在代码中更容易理解：
export default {
props: ["question", "currentQuestion"],
data() {
return {
answer: undefined
}
},
computed: {
isCurrent() {
return this.currentQuestion && th
浏览 0提问于2018-01-04得票数 6
回答已采纳
1回答
我有一个从查询更新的输入，然而，当输入字段更新时，(change)事件不会被触发。
用于输入的Html：
<input type="text" [ngModel]="inputValue" id="itemText" (ngModelChange)="setNewItem($event)">
组件文件中用于输入的函数：
setNewItem(item){
console.log("Triggered");
return this.ds.setItem(item); }
我正在更新索引html中的输入字
浏览 0提问于2017-10-10得票数 1
我在我的Angular应用程序中有一个模板驱动的表单，我尝试了很多，但我不能找出我的代码有什么问题。
我想从选择列表中返回选定的值，并将其保存到Firebase数据库。我有5个输入字段，所有字段都返回数据，我能够保存到Firebase，除了选择列表值，其数据返回为未定义。
这是我的模板驱动表单代码：
<div class="formalign">
<form #f="ngForm" (ngSubmit)="save(f.value)">
<div class="form-group">
浏览 0提问于2018-11-10得票数 1
1回答
我有一个角度的问题，我似乎不能四处走动。
我构建了一个CMS，使产品所有者能够设计一个动态注册表单，然后通过api输出为JSON。
我使用应用程序端的角来获取这个JSON并构建动态表单。当选中复选框时，我想使用ng模型和ng显示来显示/隐藏某些元素。
例如，我有一个复选框，上面写着“这也是我的邮件地址”，如果不选中，一个额外的地址表单将显示出来，以便用户可以输入他们的发货信息。
在JSON响应中，对于每个字段，我定义了"ruleKey“，它应该充当该字段的ng模型(例如: isSameAddress)。然后在发货地址表单上设置ng-show="!isSameAddress“。
浏览 3提问于2014-11-25得票数 0
回答已采纳
<EditForm Model="@_newRegister" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class=&#
浏览 0提问于2021-06-27得票数 4
3回答
我有一个角度组件，它提供输入框，以输入注释。我最初是这样做的：
<textarea class="comment-box" type="text" name="comment" value="{{_input.comment}}"></textarea>
这将使注释框预先填充现有的注释值(如果有注释的话)。效果很好。
现在，我为双向绑定添加ngModel，如下所示：
<textarea class="comment-box" type="text" name="
浏览 0提问于2019-07-25得票数 0
回答已采纳
我正在尝试创建一个具有类型号的组件输入，您可以在其中设置一个带有角的最大值和最小值
下面是我的代码:这是称为组件的HTML代码：
<app-input-number [(value)]="inputMinMaxValueNumber" [min]="min" [max]="max"></app-input-number>
这是组件的HTML代码：
<input class="gh-input" type="number" [max]="max" [min]="m
浏览 0提问于2019-02-11得票数 1
回答已采纳
2回答
下面显示了字符串值可以工作，但是如果我的输入是一个数字，它就不能工作。除了将变量变成字符串之外，还有什么想法吗？
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<p>Model: {{model | json}}</p>
NOT WORKING<br/>
<input type="radio" name="foo"
浏览 23提问于2020-03-10得票数 0
回答已采纳
1回答
我想要一个模板，它将用于创建动态用户详细信息表单。但我需要有不同的ids为所有的元素，以便张贴正确的细节。我的模板如下所示：
<div id="user-template" class="hidden">
<div class='lbl-div' id='user(user_number)'>
<label>User(user_number)</label>
</div>
<label class="lbl"
浏览 0提问于2015-06-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
