在Angular.js中使用 - ngModel指令使用NgModelController将输入,select,textarea(或自定义表单控件)绑定到作用域上的属性,该指令由此指令创建和公开。
AngularJs - SELECT 中的 ng-model
JSfiddle 问题: 我的页面中有一个 SELECT 元素,其中填充了 ng-repeat。它还有一个具有默认值的 ng-model。 当我改变值时,ng-model 会适应,那就是......
使用 formControlName 和 ngModel 的 Angular 6 警告
我最近将 Angular 版本升级到 6-rc。我收到以下警告 看来您在同一表单字段上使用 ngModel 表单控件名称。支持使用 ngModel 输入属性...
在 Angular 2,使用表单生成器的模型驱动表单中,我有: ngOnInit() { this.user = this.fb.group({ id: ['', [Validators.required, Validators.minLength(2)]], 名称:['',[有效...
<ion-col size="4"> <ion-input class="input-field" style="--padding-end: 20px; text-align: end;" [(ngModel)]="discountPercent" (ngModelChange)="onDiscountPercentChange()" type="text" appDecimalPlaces="2"> <p slot="end">%</p> </ion-input> </ion-col> your text [(ngModel)]="discountAmount" 我想添加这个地方格式函数 getFormatedNumber(saleDecimals),我该如何解决这个问题 首先,这个问题感觉不完整,但我假设您需要使用自定义函数来格式化输入中的模型值 为此,我们可以利用已经调用的 onDiscountPercentChange 并在其中运行 getFormatedNumber(saleDecimals) 就像 onDiscountPercentChange(): void { // run the format fn this.getFormatedNumber(2); }
如何使用 Angular 18 在 ngModel 中实现可选链接
我的项目中有一个场景,一个公共共享服务具有一个公共变量(对象)来存储嵌套对象。我必须使用 NgModel 访问并更新其在 html 中的值。可选链
我有ts代码: 从“@angular/core”导入{Component}; @成分({ 选择器:'复选框可配置示例', templateUrl: 'checkbox-configurable-example.html', styleUrls: ['复选框-
我正在使用 angularjs 第 1 版来使用 ng-model 在多个文本字段上显示值。 我有一个这样的对象 $scope.fieldValues = { 键:Object.keys(子键), 值:Object.val...
2 ngModel 在 Angular 中使用 ControlValueAccessor 时返回相同的值
我有组件 CustomInputComponent 我有组件 CustomInputComponent <div> <input #input="ngModel" name="input" [(ngModel)]="value" (ngModelChange)="onInputChange()" /> </div> @Component({ selector: 'app-custom-input', templateUrl: './custom-input-component.html', styleUrls: ['./custom-input-component.less'], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true, }], }) export class CustomInputComponent implements ControlValueAccessor { value= ''; onChange: (value: string) => void = () => {}; onTouched: () => void = () => {}; writeValue(value: string): void { this.value = value; } registerOnChange(fn: (value: string) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { this.onTouched = fn; } onInputChange(): void { this.onChange(this.value); this.onTouched(); } } 在其他组件中 <app-custom-input #firstInput="ngModel" [(ngModel)]="firstInputValue" ></app-custom-input> <app-custom-input #secondInput="ngModel" [(ngModel)]="secondInputValue" ></app-custom-input> <div> First touched: {{firstInput.touched}} <br/> Second touched: {{secondInput.touched}} </div> 当我输入两个应用程序自定义输入之一时,firstInput和secondInput将更改为新输入的输入的数据。但是使用firstInputValue和secondInputValue,会显示输入单词的正确值 我想向firstInput输入数据,firstInput.touched必须为true,但secondInput仍必须为false 我想可能是输入的 name 属性有问题(在较新版本的 Angular 中已解决)。 您可以像这样定义您的组件 let index_custom_input:number=0; //<--add this line @Component({ .... template: `<div> <input #input="ngModel" [name]="name" //<--see the binding "name" [(ngModel)]="value" (ngModelChange)="onInputChange()" /> </div>`, }) export class CustomInputComponent{ name='input'+(index_custom_input++) //<--declare name here }
由于绑定到服务属性的 HTML NgModel 中的数据未更新,Angular 单元测试失败
我有一个 LoginPageComponent,其中包含电子邮件和密码字段,其值是绑定到 LoginServices 的属性 loginInfo 的 NgModel。 LoginPageComponent还有登录按钮,登录时禁用...
嗨,我正在尝试将我的代码指令从 Angular 16 转换为 Angular 17,但我无法了解如何在 Angular 17 中进行引用,以便对于其他两个指令,它将引用相同的 ng-template <...
这是HTML代码 名称: 这是 HTML 代码 <form (submit)="agregarCliente()"> <div> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre" [(ngModel)]="nuevoCliente.nombre" required> </div> <div> <label for="apellidos">Apellidos:</label> <input type="text" id="apellidos" name="apellidos" [(ngModel)]="nuevoCliente.apellidos" required> </div> <div> <label for="calle">Calle:</label> <input type="text" id="calle" name="calle" [(ngModel)]="nuevoCliente.calle" required> </div> <div> <label for="email">Email:</label> <input type="email" id="email" name="email" [(ngModel)]="nuevoCliente.email" required> </div> <div> <label for="numTelefono">Número de Teléfono:</label> <input type="text" id="numTelefono" name="numTelefono" [(ngModel)]="nuevoCliente.numTelefono" required> </div> <button type="submit">Agregar Cliente</button> </form> 这是app.module.ts import { NgModule } from '@angular/core'; import { CalendarModule } from 'primeng/calendar'; import { AppComponent } from './app.component'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [AppComponent], imports: [NgModule, CalendarModule, CommonModule, HttpClientModule, FormsModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 我尝试以多种方式导入表单模块,我检查了多个论坛,他们都说要确保导入,但很明显这是正确的我不知道还能做什么 你在主模块中使用了formModule吗? 也就是说,您想在主模块还是另一个内部模块中创建表单。 因为如果您想在内部模块中使用 formModule,那么您也必须将 formModule 包含在内部模块中。 如果解释不够清楚,请写信给我,我会尽力解释更多。 我可以展示我自己的例子,也许会有帮助...... 在app.module中: import { FormsModule, ReactiveFormsModule } from "@angular/forms"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, FormsModule, ReactiveFormsModule, VolunteersManagementModule, GeneralModule, PlacementVolunteersModule, HttpClientModule], providers: [VolunteerService], bootstrap: [AppComponent] }) export class AppModule { } 在我的内部模块 PlacementVolunteersModule 中: @NgModule({ declarations: [ SchedulingComponent ], imports: [ CommonModule, FormsModule, ReactiveFormsModule,BrowserModule ], providers: [ScheduleService], exports:[SchedulingComponent] }) export class PlacementVolunteersModule { }
Angular 17 在没有 app.module.ts 的项目中“无法绑定到‘ngModel’”
我目前正在开发一个 Angular 17 项目,该项目是默认使用独立组件创建的,但我总是遇到此错误:“无法绑定到‘ngModel’,因为它不是已知的
我在 Angular 中使用以下版本,Angular CLI:17.3.4,节点:20.9.0,包管理器:npm 10.5.2。当我在组件中的 .html 页面上使用 *ngIf 或 ngmodel 时,出现以下错误...
为什么 ngModel 不适用于 Angular 17 的最新版本?
我正在尝试在我的角度应用程序中制作一个表单,但是当我想在我的表单上实现 ngModel 时: 我正在尝试在我的角度应用程序中创建一个表单,但是当我想在我的表单上实现 ngModel 时: <form (ngSubmit)="onSignUp()" #signupForm="ngForm"> <h1>Connexion</h1> <input type="email" name="mail" [(ngModel)]="userLogin.email" placeholder="Email" /> <input type="password" name="mdp" [(ngModel)]="userLogin.password" placeholder="Password" /> <a href="#">Mot de passe oublie ?</a> <button type="submit">Se Connecter</button> </form> 我有这个错误: NG8002:无法绑定到“ngModel”,因为它不是“input”的已知属性。 [插件角度编译器] 我无法在 app.module.ts 中导入 FormsModule,因为 Angular 17 上不存在该文件,我只有一个 app.config.ts 文件。 有人可以解释一下我该怎么做吗? 如果你的组件设置了standalone: true,那么你需要将FormsModule添加到组件的imports数组中! @Component({ ... imports: [ ... FormsModule, ... ], ... })
NG8003:未找到带有exportAs“ngForm”的指令。 [插件角度编译器]
我试图运行我的网站,但出现了这个错误 当我构建时,我得到这个错误: 预渲染 0 条静态路由。 应用程序包生成失败。 [5.115秒] ✘ [错误] NG8003:否
我是 AngularJS 的新手,正在尝试创建一个简单的应用程序,该应用程序允许我将文件上传到我的 Laravel 驱动的网站。我希望表单能够向我显示上传项目的预览...
@Angular Form 未显示( ngForm [(ngModel)]
iam 是 Angular 的新手,我尝试创建一个表单作为 ngForm。我的问题是,当程序成功编译时,表单不会显示在我的网站上。我认为我对“n...
Angular 中的“Value”属性不会应用于 <input> 标签
我正在制作向导表单。该表格有多个步骤(个人、地址...)。所有这些步骤都代表了包装在父组件中的子组件,该子组件使用 NgRx Store 来保存数据...
我试图让用户选择将文本字段添加到表单中,目前我已经像这样设置了控制器 $scope.campaign = {名称:"",问题:"",答案:[]}; var 总答案 = 2; 变种