标签: angular2-forms

我想<select name="selectmodel"> <option>根据元素的选择从嵌套的对象数组中填充<select name="selectmake"> <option>。

这是多维数组：

muscleCars = [
    {
      id: 1, name: "Chevrolet", models: [
        { model: "Camaro" },
        { model: "Corvette" }
      ]
    },
    {
      id: 2, name: "Dodge", models: [
        { model: "Charger" },
        { model: "Challenger" },
        { model: "Viper" }
      ]
    },
    {
      id: 3, name: "Ford", models: [
        { model: "GT" },
        { model: "Mustang" }
      ]
    }
];

这是 HTML

//select for Make:
<select name="selectmake" [(ngModel)]="makeListFilter">
    <option *ngFor="let muscleCar …

我将 ionic2 与 angular2 一起使用，并且我有一个使用 formbuilder 构建的表单，但我想检测某个输入的新变化。

ionViewDidLoad() {
  this.purchaseDataForm = this.formBuilder.group({
    kms: ['', Validators.required],
    lts: ['', Validators.required],
    price: ['', Validators.required],
    total: ['', Validators.required]
  });
}

所以这是我的形式是如何得到证实，但我想认购的valuechanges价格和LTS的投入，你知道该怎么做？

我正在尝试使用以下功能，但它显示 Cannot read property 'valueChanges' of undefined

 ngOnInit() {
  this.purchaseDataForm.price.valueChanges.subscribe(value => {
    console.log(value);
  });
}

谢谢！

我有一个像下面这样的表格：

 createForm() {
    this.procedimentoForm = this.formBuilder.group({
      nome: ['', Validators.required],
      descricao: ['', Validators.required],
      conteudo: ['', Validators.required],
      solucao: ['', Validators.required],
      mesa: ['', Validators.required]
    });
  }

模板：

<form [formGroup]="procedimentoForm" class="ui form">
  {{procedimentoForm.value.conteudo}}


  <div class="field">
    <label>Descrição</label>
    <input type="text" placeholder="Descrição" formControlName="descricao">
  </div>

  <div class="field">
    <label>Conteúdo</label>
    <tinymce [elementId]="'conteudo'" (onEditorKeyup)="keyupHandlerFunction($event)"></tinymce>
  </div>

</form>

它使用实现 TinyMCE 编辑器的自定义组件：

import { Component, AfterViewInit, ViewChild, EventEmitter, forwardRef, ElementRef, OnDestroy, Input, Output } from '@angular/core';
import { 
ControlValueAccessor, 
NG_VALUE_ACCESSOR, 
NG_VALIDATORS, 
FormControl, 
Validator 
} from '@angular/forms';

@Component({
selector: 'tinymce',
templateUrl: './tinymce.component.html',
})
export class …

我在我的 angular2 应用程序中使用 ng2-uploader。

这是我的代码：

 options: Object = {
   url: "http://localhost/APP/opsnd/api/index.php/mydkd/configured/?"+JSON.stringify(this.type)
 };

我在上面的代码中所做的是附加一个动态更改的参数并与文件一起发送到服务器。

网页：

input type="file" ngFileSelect  [options]="options" (onUpload)="handleUpload($event)" (beforeUpload)="beforeUpload($event)">

问题是，当我选择一个文件时，它会使用默认的 [option] url 自动加载到服务器。因此，即使 url 中的参数发生变化，默认的 url 也会发送到服务端。如何动态更改 [options] 以便它监听组件中的更改？

<tbody>
    <tr *ngFor="let trxList of trxNumberList; let i= index">
        <td>{{i}}</td>
        <td>
            <input type="text" name="trxNumber-{{i}}" class="form-control" minlength="1" maxlength="20" [(ngModel)]="trxList.trxNumber" />
        </td>
    </tr>
</tbody>

这是我的表格主体，当我在第一个输入框中键入时，所有其他输入都绑定到该值。附图片。请帮忙。

编辑：

组件代码：

trxNumberObj = new Transaction;

ngOnInit() { 
  for(var i= 0 ; i <= 10; i++ ){ 
    this.trxNumberObj.count = i; 
    this.trxNumberList.push(this.trxNumberObj); 
  } 
}

I'm using angular material 2 inside my angular application. I'm experiencing a problem when my form input field error messages are more than one line. Here is the photo:

Here is the code:

<md-error *ngIf="password.touched && password.invalid">
          <span *ngIf="password.errors.required">
                {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}}
          </span>
          <span *ngIf="password.errors.minlength || password.errors.maxlength">
                {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}}
          </span>
          <span *ngIf="password.errors.pattern">
                {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}}
          </span>
</md-error>

I've understood by reading github, that it is a bug in angular 2 material. Did anybody manage to solve this issue by …

我是 angular2 的新手。我正在使用 ckeditor 创建一个反应式表单。一切都很好，但我的 ckeditor 数据没有发布。它是空的。我正在阅读指南并创建它，但我无法获得完美的结果。

im user form[formGroup] createPage 并在此表单中使用 ckditor。但我无法获得ckeditor的数据。我如何使用表单从 ckeditor 获取数据。在表单提交按钮中单击。

这是我的 ckeditor.ts 文件

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'CKEDITOR',
  template: `
     <textarea name="targetId" id="targetId"  rows="rows" cols="cols">
         {{content}}
     </textarea>`
})
export class AdminCkeditorComponent implements OnInit {
  content: any = "test content";
  @Input() targetId;;
  @Input() rows = 10;
  @Input() cols;     
  constructor() { }
  ngOnInit(){
    window['CKEDITOR']['replace']( 'targetId' );
  }
}

这是 page.ts 文件

import { FormGroup, FormControl } from '@angular/forms';
import { Component, …

我正在使用 ionic2 在 angular2 中进行表单验证。我想在用户输入无效值时停止显示错误消息，并且仅当用户在输入框外单击时才显示错误消息。

表单.html

<form>
<ion-input type="text" [(ngModel)]="username" name="username" #username="ngModel" required></ion-input>
<span *ngIf="username.touched && username.invalid && username.dirty">username is incorrect</span>
<form>

当用户输入数字时，上面的表单显示错误消息。我想在用户输入时隐藏错误消息，即焦点输入，并在用户点击输入字段外即失去焦点时显示错误消息。

我怎样才能做到这一点？

我正在使用 angular2 的模板驱动表单方法。

如何设置角度材质输入字段的值。然后，我从我的组件中以 json 对象的形式从数据库获取数据，我想将这些数据设置为 Angular Material 表单输入字段中的值。

this.http.get('http://localhost:8000/v1/passenger/2/getPassenger').
  subscribe(
      response => {
        this.data = response.json();
      }
  );

如何在表单中传递值。

我在 YouTube 上的 AngularConnect 2017 上看到了 Kara Erickson 的 Angular 表单演示。我特别感兴趣的部分是她描述嵌套反应形式的地方

我已经完成了 Kara 描述的所有事情，但null无论我尝试什么，我最终都会得到一个parentForm。

我在下面复制了我的代码的简化版本。问题是在child-form我得到的组件中null。

// 父组件

@Component({
  selector: 'parent-form',
  styleUrls: ['./parent-form.component.css'],
  template: `
    <form [formGroup]="createAlbumProfileForm" (ngSubmit)="onFormSubmitted($event)">
        <input type="text" placeholder="Something unique to parent form"/>
        <child-form></child-form>
    </form>
  `
})
export class ParentFormComponent implements OnInit {

  parentForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.parentForm = this.formBuilder.group({
      yoloField: this.formBuilder.control('')
    });
  }

// 子组件

@Component({
    selector: 'child-form',
    styleUrls: [ './child-form.component.scss' ],
    viewProviders:[ { provide: ControlContainer, …