标签: angular-forms

我正在将购买的第三方模板转换为Angular 5应用程序,并且遇到了错误.我对Angular 5很新(但我知道AngularJS很好)并且不明白它试图告诉我什么？它似乎与显示/隐藏顶部导航栏的按钮有关.

错误消息(来自浏览器):

Error: Template parse errors:
No provider for ControlContainer ("imalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      [ERROR ->]<form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-gro"): ng:///AppModule/TopNavigationNavbarComponent.html@4:6

component.html:

<div class="row border-bottom">
  <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <a class="minimalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      <form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-group">
          <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
        </div>
      </form>
    </div>
    <ul class="nav navbar-top-links navbar-right">
      <li>
        <a href="#">
          <i class="fa fa-sign-out"></i> Log out …

我正在构建一个带有角形的形状,它可以很好地使用1个按钮.但是当我想要2个按钮时,它很难处理.

我想要1个按钮reset和1个按钮submit.reset必须放在之前submit.这是模板:

<form (ngSubmit)="submit()" [formGroup]="form">
    //inputs...
    <button type="submit" (click)="reset($event)">reset</button>
    <button type="submit">submit</button>
</form>

当我按下enter一个输入时,form火submit()和 两个reset($event)功能.点击reset按钮时也一样.我的期望是:

• 按enter或单击submit按钮时,表单仅启动submit()功能
• 单击reset按钮时,表单只有fire reset()功能
  
  

我能找到一个走一圈之前增加了隐藏式按键reset 按键,调event.stopPropagation(); event.preventDefault()中 reset()功能.但它很难看.有干净的方法吗？任何帮助,将不胜感激.非常感谢!

我试图select在Angular 5中实现,但我不断得到这个

我已经尝试了很多StackOverflow问题,唯一的区别是 - 我的组件位于应用程序内的另一个模块中,最后注入主模块.我也尝试过注入FormsModule内部模块.我尝试过导入ReactiveFormsModule 但没有工作.

我添加了FormsModule这样的导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    ...CombineComponents
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ]
});

这是我的组件标记

<label for="ctn" class="d-inline-block pl-1 semi-bold">Current active number</label>
  <select
    #selectElem
    class="custom-select"
    id="ctn"
    (change)="onCTNChange(selectElem.value)"
    formControlName="state"
  >
    <option value="" disabled>Choose a state</option>
    <option *ngFor="let ctn of availableCTN" [ngValue]="ctn.value">
      {{ctn.text}}
    </option>
  </select>

我有一个元素数组，用户不仅可以编辑，还可以添加和删除完整的数组元素。除非我尝试在数组的开头添加一个值（例如使用unshift），否则此方法效果很好。

这是证明我的问题的测试：

import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';


@Component({
    template: `
        <form>
            <div *ngFor="let item of values; let index = index">
                <input [name]="'elem' + index" [(ngModel)]="item.value">
            </div>
        </form>`
})
class TestComponent {
    values: {value: string}[] = [{value: 'a'}, {value: 'b'}];
}

fdescribe('ngFor/Model', () => {
    let component: TestComponent;
    let fixture: ComponentFixture<TestComponent>;
    let element: HTMLDivElement;

    beforeEach(async () => {
        TestBed.configureTestingModule({
            imports: [FormsModule],
            declarations: [TestComponent]
        });

        fixture …

我有一个表单，我想知道表单中的任何输入字段是否有焦点？

我阅读了“ NgForm ”文档，但没有找到与“ focus ”相关的任何内容。

我发现感动，但它不能满足需求。

我有Angular形式(不反应),在ngModel中绑定数据:

 <form #form="ngForm">
  <input [(ngModel)]="user.name">
  <input [(ngModel)]="user.color">

  <button type="submit">Save</button>
 </form>

如果绑定数据未更改,如何禁用提交按钮？

我在角度2/4中使用了表单构建器,但现在我在角度6中使用它.我已经看到了这个问题(不能绑定到'formGroup',因为它不是'form'的已知属性)但是它是针对角度2.我对角度4完全相同,但我得到了这个错误.请帮忙:我的代码是:

app.module.ts :(我已导出FormsModule和ReactiveFormsModule):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';

import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';


@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ], …

有没有办法将反应式表单组重置为其初始值而不是使用.reset()方法将其清空？

我有以下stackblitz，其中默认选择的值为Parent，如果用户将其更改为姐妹，并希望将表单设置为初始值，请单击重置按钮来执行此操作。

目前，我尝试过：

this.formGroup.reset();
//Or
this.formGroup.markAsPristine;
//Or
this.formGroup.markAsTouched

在.reset()完全地重置表单。

PS 有些人可能会说用户可以重新选择默认值而不是点击重置按钮。但就我而言，我有一个巨大的用户表单，他需要在其中更新他的信息，如果他在某些值中弄错了，他可能需要重置为初始值。

在模板驱动的表单中,我有两个输入.第二个来自ng-template.

<form #testForm="ngForm">
    First name <input type="text" name="firstName" [(ngModel)]="firstName" required> (required)
    <br>
    <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
</form>

inputTemplate看起来像这样:

<ng-template #inputTemplate>
    Last name <input type="text" name="lastName" [(ngModel)]="lastName" required> (required)
</ng-template>

两个输入都具有'required'属性,但是虽然第二个输入为空,但表单仍然有效.

有没有办法确保表单识别模板的输入？

演示:Plunker

编辑:在我的实际应用程序中,ng-template来自另一个(第三方)组件,并使用模板引用加载,请参阅此Plunker.

我只找到了一些关于亲子组件问题的解决方案,但在这种情况下这些并不可行.

键入的表单很棒，但我想知道如何最初显示带有“数字”类型作为空输入字段的表单控件。我想将我的控件保持为非空，因为它们在我的表单中是必需的，但它排除使用 null 作为初始值，这是之前的解决方案。

编辑：也许我描述了我的情况。我有几个数字类型的 FormControl。我想最初将这些输入显示为空。因此，可能的解决方案是将 FormControl 构造函数中的初始值设置为 null。但 FormControl 的类型为 <number | 空>。所有这些都是必需的。提交后，我需要将该数据发送到服务器并分配 FormControl<number | null> value 为number类型的属性，这使得我为每个属性添加显式转换，即使我知道提交后由于“必需”验证器它们不能为空。我的 FormControl< string > 转换是不必要的，我可以通过提供“”作为初始值来显示空输入。我想知道是否有一些解决方法可以用数字来做到这一点。