angular-ngmodel 相关问题

Angular FormControlName 与 NgModel 绑定

我有一个使用 Angular 的 FormgroupName 或 NgModel 的一般问题。 我正在阅读的文档说 NgModel 在版本 6 中已被弃用，但它在 17/18（今天的当前版本）中仍然可用。

AngularJs - SELECT 中的 ng-model

JSfiddle 问题： 我的页面中有一个 SELECT 元素，其中填充了 ng-repeat。它还有一个具有默认值的 ng-model。 当我改变值时，ng-model 会适应，那就是......

使用 formControlName 和 ngModel 的 Angular 6 警告

我最近将 Angular 版本升级到 6-rc。我收到以下警告 看来您在同一表单字段上使用 ngModel 表单控件名称。支持使用 ngModel 输入属性...

Angular 2 中模型驱动的表单验证问题

在 Angular 2，使用表单生成器的模型驱动表单中，我有： ngOnInit() { this.user = this.fb.group({ id: ['', [Validators.required, Validators.minLength(2)]], 名称：[''，[有效...

离子输入ngModel两种方式数据绑定或添加数字格式

<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 中将对象值设置为 ng-model

我正在使用 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还有登录按钮，登录时禁用...

如何使用@if @else

嗨，我正在尝试将我的代码指令从 Angular 16 转换为 Angular 17，但我无法了解如何在 Angular 17 中进行引用，以便对于其他两个指令，它将引用相同的 ng-template <...

ngModel 即使导入 FormModule 后也会出错

这是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’，因为它不是已知的

*ngIf 和 ngmodel 不适用于 .html 页面

我在 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：否

尝试使用 ng-model 将空格替换为破折号

我是 AngularJS 的新手，正在尝试创建一个简单的应用程序，该应用程序允许我将文件上传到我的 Laravel 驱动的网站。我希望表单能够向我显示上传项目的预览...

@Angular Form 未显示（ ngForm [(ngModel)]

iam 是 Angular 的新手，我尝试创建一个表单作为 ngForm。我的问题是，当程序成功编译时，表单不会显示在我的网站上。我认为我对“n...

Angular 中的“Value”属性不会应用于 <input> 标签

我正在制作向导表单。该表格有多个步骤（个人、地址...）。所有这些步骤都代表了包装在父组件中的子组件，该子组件使用 NgRx Store 来保存数据...

AngularJS 复选框 ng-model 作为数组

我的 HTML 是 一氧化碳...