标签: angular4-forms

我已经通过模板驱动的表单实现了一个自定义表单控件，该表单控件将输入包装为html并添加了标签等。它与ngModel上的2way数据绑定可以很好地与表单进行对话。问题是，表单在初始化时会自动标记为脏的。有没有一种方法可以防止这种情况发生，因此我可以在表单上使用这些属性，它们将是准确的？

自定义选择器（除了自动标记为脏以外，此方法还可以正常工作）：

<form class="custom-wrapper" #searchForm="ngForm">
            {{searchForm.dirty}}
            {{test}}
            <custom-input name="testing" id="test" label="Hello" [(ngModel)]="test"></custom-input>
            <pre>{{ searchForm.value | json }}</pre>
</form>

自定义输入模板：

<div class="custom-wrapper col-xs-12">
    <div class="row input-row">
        <div class="col-xs-3 col-md-4 no-padding" *ngIf="!NoLabel">
            <label [innerText]="label" class="inputLabel"></label>
        </div>
        <div class="col-xs-9 col-md-8 no-padding">
            <input pInput name="cust-input" [(ngModel)]="value"  />
        </div>
    </div>
</div>

自定义输入组件：

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { Component, Input, forwardRef } from "@angular/core";

@Component({
    selector: "custom-input",
    template: require("./custom-input.component.html"),
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => QdxInputComponent),
            multi: true
        }
    ] …

我在Angular 4中制作了一个反应形式，并valueChanges在下面的形式中寻找：

this.searchForm.valueChanges.subscribe((value) => {
   console.log(value);
});

上面的代码工作完美。但如何从取消valueChanges上ngOnDestroy()作为this.searchForm.valueChanges.unsubscribe()似乎并不工作。请帮我解决这个问题。

在Angular 4+中,我遵循模板驱动的形式:

<form #addForm="ngForm" (ngSubmit)="onFormSubmit($event, addForm)" >
  <div class="form-group">
    <label for="item_name">Item Name</label>
    <input id="item_name" name="item_name" [(ngModel)]="itemName" 
          #item_name="ngModel" autofocus class="form-control"
          required minlength="4" maxlength="20" 
          aria-describedby="itemNameHelpBlock">
    <small *ngIf="(item_name.invalid && item_name.touched)" id="itemNameHelpBlock" class="form-text text-error" >
      Value must be at least 4 characters and must not exceed 20 characters
    </small>
  </div>
  <div class="form-group">
    <label for="item_type">Item Type</label>
    <input id="item_type" name="item_type" [(ngModel)]="itemType" 
         #item_type="ngModel" class="form-control" required minlength="2"
          maxlength="20" aria-describedby="itemTypeHelpBlock">
    <small *ngIf="(item_type.invalid && item_type.touched)" id="itemTypeHelpBlock" class="form-text text-error" >
      Value must be at least 2 characters and must not exceed …

当我将打字稿版本从2.0.1升级到2.4.1时,我面临以下问题......

我正在使用 Material 2.0.0-beta.12 运行 Angular 4.3.4，并且在尝试创建 mat-select 以从异步源生成动态 mat-option 列表时遇到问题。我得到的只是占位符，下拉列表不会扩展。我什至没有收到错误代码。

这是我的代码更新示例：

 <form [formGroup]="snoozeForm" novalidate>
  <div fxLayout="column">
    <mat-form-field>
      <mat-select formControlName="snooze_reason">
        <mat-option [value]="reason.attributes.snooze_reason_code" *ngFor="let reason of reasons">{{ reason }}</mat-option>
      </mat-select>
    </mat-form-field>
</form>

如您所见，原因是动态填充的数组。我一定忽略了一些简单的事情，但我确信原因越来越多。

这是我填充数组的地方：

ngOnInit() {
  this.generateForm();
  this.httpService.getSnoozeReasons()
    .subscribe( res => {
      this.reasons = res;
    }, (error: any) => {
      const msg: Message = { title: 'Frontend API Error', textbody1: '' };
      if (error.message) {
        msg.textbody1 = <any>error.message;
        msg.textbody2 = `Task-details component - Snooze reasons`;
      } …

我已经看到了关于stackoverflow的这个问题的答案,它涉及应用程序的配置方式.但是我很确定我已经正确配置它,因为应用程序运行得很好但我的超级简单的Karma测试失败了.

这是我的app.module.ts:

import { NgModule } from '@angular/core';

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

import { AppComponent } from './app.component';
import { LoginFormComponent } from './login-form/login-form.component';

import { ManagerService } from './manager.service';
// import { AuthinterceptorService } from './authinterceptor.service';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
//    AppRoutingModule,
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
    LoginFormComponent
  ],
  // TODO use interceptor to send oauth …

有一个代码：

<select name="department" class="form-control select" [(ngModel)]="departments" formControlName="departmentControl">    
    <option *ngFor="let department of departments" [ngValue]="department" [selected]="department.id == this.departmentid">
      {{ department.name }}
    </option>
  </select>

和功能：

isSelected(department): boolean {
  debugger;
  return department.id == this.departmentid;
}

部门-是用户详细信息组件的嵌套组件。首次选择用户详细信息组件后，未选择部门。但是第二次一切正常。哪里有错？

我在我的项目中处理了 10 多个带有许多输入字段的表单。问题是我的字段将空格作为值。至于现在我所做的是在更改时获取字段的值并修剪它并用 0 检查长度。如果是，则抛出“不使用空格”，否则取值。

<input (change)='check($event)'>

check(data){
   if(data.trim() === 0 ){
       console.log('contains empty spaces'   
   }else{
        console.log('contains data') 
   }
}

但是随着字段或表单的增加，这将是一个令人头疼的问题。所以我试图把它作为通用模块。所以我会像服务一样使用它。

注意：验证应该发生在借口上（即）'HelloWorld' 应该抛出错误但'Hello World' 不应该。谁能给我一些想法或建议来解决这个问题..

提前致谢

默认情况下，输入字段被禁用，一旦选中复选框，我应该启用这些字段。角度 4 有什么想法吗？

我正在研究 Angular 4。我有一个 HTML 页面，其中包含一些数据。

我想使用 JSON 格式的角度数据绑定将 HTML 数据获取到打字稿。

通过网络搜索后，我也在我的中添加了表单模块appmodule.ts。

我尝试过使用 HTML DOM。但我遇到了以下错误

任何人都可以帮助如何使用角度绑定，以便如果我更改数据，它也应该在后端更改

以及如何通过从 HTML 获取到 Typescript 来加载数据。

Thanks in advance

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  Input,
  Output,
  EventEmitter
} from '@angular/core';
export class SystemDynamicsComponent implements OnInit {
  system: any;
  @ViewChild('diagramDiv')
  private diagramRef: ElementRef;
  @Input()
  get model(): go.Model {
    return diagram.model;
    console.log('get', diagram.model);
  }
  set model(val: go.Model) {
    diagram.model = val;
    console.log('set', diagram.model);
  }
  // @Output()
  modelChanged = new EventEmitter < …