angular4-forms 相关问题

与Angular 4模板或反应形式相关的问题。

如果类在模板驱动形式 Angular 4 中无效，为什么类不应用于输入元素？

我的登录页面使用了模板驱动的表单。如果输入元素无效或有任何错误，我希望在输入元素上有一个红色边框，但当...

angular angular4-forms

回答 7 投票 0

材料 2 表单控件选择不适用于异步源

我正在使用 Material 2.0.0-beta.12 运行 Angular 4.3.4，并且在尝试创建 mat-select 以从异步源生成动态 mat-option 列表时遇到问题。我得到的只是

angular angular-material2 angular4-forms

回答 3 投票 0

如何使用 Angular 2/4 开发搜索建议文本框

我是 Angular 的新手。我如何开发 Angular 2/4 中的下拉建议搜索框。单击搜索按钮时，将使用下面的代码显示详细信息。但是我在输入文本时尝试...

asp.net angular angular2-template angular2-forms angular4-forms

回答 4 投票 0

ng提交不起作用

我有一个 Angular 4 表单，我正在尝试提交数据 HTML 代码我有一个 Angular 4 表单，我正在尝试提交数据 HTML 代码 <form class="form-horizontal" [formGroup]="signupForm" (ngSubmit)="onFormSubmit()" > <fieldset> <legend>Scheduler</legend>  <div class="form-group"> <label for="scheduleJob">Schedule Job</label> <input type="text" formControlName = "schedulejob" id="scheduleJob" placeholder="Schedule Job"> 按钮代码 <div class="form-group"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> Scheduler.TS 文件 import { Component, OnInit } from '@angular/core'; import { Scheduler } from 'rxjs/Scheduler'; /* Import FormControl first */ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-scheduler', templateUrl: './scheduler.component.html', styleUrls: ['./scheduler.component.css'] }) export class SchedulerComponent implements OnInit { //Gender list for the select control element private scheduleTypeList: string[]; //Property for the user private scheduler:Scheduler; private signupForm: FormGroup; constructor(private fb:FormBuilder) { } ngOnInit() { this.scheduleTypeList = ['Type 1', 'Type 2', 'Type 3']; this.signupForm = this.fb.group({ schedulejob: ['', Validators.required] , frequency: ['', Validators.required], days: ['', Validators.required], zone: ['', Validators.required], schedulerjobtype:['', Validators.required] }) } public onFormSubmit() { this.scheduler = this.signupForm.value; if(this.signupForm.valid) { this.scheduler = this.signupForm.value; console.log(this.scheduler); // alert(this.scheduler); /* Any API call logic via services goes here */ } //alert(this.scheduler); console.log(this.scheduler); } } 为什么在提交点击和警报时执行没有传递到 onFormSubmit 或 console.log 不打印值？就像我在评论中所说，如果您的按钮不在表单内，它将不会提交。所以改为： <form> ... <button type="submit">Submit</button> </form> 但是，如果您做得有点不同，则可以将其放在外面，如本问题中所述。我遇到了同样的问题，因为我没有使用 <form> 标签来包装我的表单。您可以做的一个小技巧是在表单内放置一个辅助隐藏按钮，并让主按钮以编程方式单击辅助按钮： <form [formGroup]="form" (ngSubmit)="submit()"> ... <button type="submit" hidden #btn></button> </form> ... <button (click)="btn.click()">Submit</button> 您需要将按钮代码放入表单中，如下所示 <form class="form-horizontal" [formGroup]="signupForm" (ngSubmit)="onFormSubmit()" > <fieldset> <legend>Scheduler</legend>  <div class="form-group"> <label for="scheduleJob">Schedule Job</label> <input type="text" formControlName = "schedulejob" id="scheduleJob" placeholder="Schedule Job">  <div class="form-group"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div>  </form> 您还可以在提交按钮中使用表单属性。该属性使用表单的 id 来引用它： <form id="formID"> ... <button type="submit" form="formID">Submit</button> </form> 我遇到了同样的问题。经过一番努力后，我意识到我在按钮的单击方法中调用了 event.stopProgogation() 和 event.preventDefault() 。当用户单击按钮时，这些方法调用会阻止表单提交。我的问题的解决方案只是删除这些方法调用。当这件事发生在我身上时，我确实检查了所有可能的方法。最后我发现解决方案是我没有在 app.module 文件中包含 FormsModule 。

html angular angularjs-directive angular4-forms

回答 7 投票 0

Angular 4 - 验证器自定义函数这是未定义的

我正在构建一个应用程序与组件 FormComponent。在里面，我正在使用来自 Angular Core 的反应式表单模块并创建一个自定义验证器。该函数正在调用另一个函数，方法是使用 this - a...

javascript angular typescript angular4-forms

回答 3 投票 0

自定义表格输入时未检测到更改

我有一个Angular 4的自定义表单输入。我无法在点击这个元素上的嵌入式下拉菜单时传播变化。我只能在使用最后一个选项 "添加自定义 "和......的情况下获得更改。

angular angular4-forms

回答 1 投票 2

Angular 4-反应形式-模糊一个字段将所有字段突出显示为红色

对于上下文，这是我的表单：this.commentForm = this.fb.group（{commentId：['']，commentType：[''，ExistsWithinList（this.commentTypes）]，商品：[''，.. 。

angular typescript angular-reactive-forms angular4-forms

回答 1 投票 0

带有重复文本的Angular 4搜索框

Angular 4 serach box issue如何在一个文本框中输入值时如何停止第二个搜索框文本中的值。我们在页面中的每个项目都有多个搜索框。当我们在一个文本框中输入任何文本时...

angular angular5 angular4-forms angular4-router

回答 1 投票 0

错误：初始化后无法更改选择的`multiple'模式

错误图像： [ ]]] 此问题有一个非常丑陋的解决方法，将您的Mat-select变形为* ngif = true，并创建一个具有Multiple属性的副本，并在其下方包裹一个* ngif =！true。>

html angular angular2-template angular2-forms angular4-forms

回答 1 投票 0

如何基于angular4中的* ngif禁用输入文本

如果ngif条件满足文本框字段，如何禁用文本框。下面对我没用

angular angular4-forms angular4-httpclient

回答 3 投票 0

如何在Angular 6中验证FormArray控件

我的HTML看起来像这样- [[]]]] ] this.form = new FormGroup({ Equip_Name: new FormControl('',[Validators.required, Validators.pattern('^[^]+[a-zA-Z ]*')]), Equip_Description: new FormControl('',[Validators.required , Validators.pattern('^[^]+[a-zA-Z0-9 ]*')]), });

angular validation angular7 angular4-forms formarray

回答 1 投票 0

如何使用模板驱动的表格使用角度4发布表格数据

我想将请求有效负载数据发布在提交表单字段上，作为发布API：400错误请求面临问题。如何通过表单详细信息传递请求有效负载？ component.html

angular angular4-forms angular4-httpclient

回答 1 投票 0

angular 4-如何将POST中的文件发送到后端

我在表单中上传了一个文件。我需要使用此上传文件和其他一些表单字段创建后端请求。以下是我的代码：除上传的文件外，每个字段值都被发送到后端。我是否将上传的...

angular file-upload angular4-forms

回答 2 投票 3

在生产模式下构建Angular应用程序时嵌套FormGroup返回错误

已经针对此错误发布了一些博客，但未为FormGroup指定任何博客，它们都提供了FormArray解决方案为了某种目的，我不得不在angular 中创建一个...