我对自己的表格有点疑惑.

我做了一个自定义元素:

<div formControlName="surveyType">
  <div *ngFor="let type of surveyTypes"
       (click)="onSelectType(type)"
       [class.selected]="type === selectedType">
    <md-icon>{{ type.icon }}</md-icon>
    <span>{{ type.description }}</span>
  </div>
</div>

我尝试添加formControlName但有角度不想知道任何事情,只是说:

<div formControlName="surveyType">
  <div *ngFor="let type of surveyTypes"
       (click)="onSelectType(type)"
       [class.selected]="type === selectedType">
    <md-icon>{{ type.icon }}</md-icon>
    <span>{{ type.description }}</span>
  </div>
</div>

我试图添加ngDefaultControl但没有成功.这似乎是因为没有输入/选择...但我不知道该怎么做.

我想将我的点击绑定到这个formControl,以便当有人点击整个卡片时将我的'type'推入formControl.可能吗？

我正在尝试开发一个联系表单,我希望用户输入长度为10-12的电话号码.

值得注意的是,相同的验证工作在Message字段,它唯一的数字字段给我带来了麻烦.

我找到了这个答案,但对我来说没用.

我有以下代码:

HTML:

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
      <input type="number" formControlName="phone" placeholder="Phone Number">
      <input type="text" formControlName="message" placeholder="Message">
       <button class="button" type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

TS:

this.myForm = this.formBuilder.group({
     phone: ['',  [Validators.required, Validators.minLength(10), Validators.maxLength(12)]],
     message: ['',  [Validators.required, Validators.minLength(10), Validators.maxLength(100)]]
});`

我在Angular 4中尝试嵌套的反应形式.它工作正常但是当我尝试构建AOT时它会抛出错误

'AbstractControl'类型上不存在'controls'

我用Google搜索并尝试了一些事情,但没有运气.谁能告诉我如何解决这个问题？

<div [formGroup]="myForm">
    <div formArrayName="addresses">
        <div *ngFor="let address of myForm.get('addresses').controls; let i=index" 
                    class="panel panel-default">
            <span *ngIf="myForm.get('addresses').length > 1"
                    (click)="removeAddress(i)">Remove</span>
            <div [formGroupName]="i">
                <mat-form-field>
                    <input matInput formControlName="city" placeholder="city" value="">
                </mat-form-field>
            </div>

        </div>
    </div>
    <a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>

下面的打字稿代码

constructor(private _fb: FormBuilder) {     
}

ngOnInit() {
    this.myForm = this._fb.group({
        addresses: this._fb.array([
            this.initAddress(),
        ])
    });
}
initAddress() {
    return this._fb.group({
        city: ['']
    });
}
addAddress() {
    const control = <FormArray>this.myForm.get('addresses');
    control.push(this.initAddress());
}
removeAddress(i: number) {
    const control = …

如何从Angular 4中的select选项中获取值？

我想将它分配给component.ts文件中的新变量.我试过这个,但没有输出.

你也可以用[(ngModel)]吗？

component.html

<form class="form-inline" (ngSubmit)="HelloCorp(f)" #f="ngForm">
     <div class="select">
         <select class="form-control col-lg-8" #corporation required>
             <option *ngFor="let corporation of corporations" [value]="corporationObj">{{corporation.corp_name}}</option>    
         </select>
             <button type="submit" class="btn btn-primary manage">Submit</button>
     </div>
</form>

component.ts

HelloCorp() {
const corporationObj = corporation.value;
}

ERROR TypeError: jit_nodeValue_4(...).$any is not a function
at Object.eval [as handleEvent] (AddNewConnectionsComponent.html:42)
at handleEvent (core.js:13581)
at callWithDebugContext (core.js:15090)
at Object.debugHandleEvent [as handleEvent] (core.js:14677)
at dispatchEvent (core.js:9990)
at eval (core.js:10611)
at HTMLInputElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4744)
at ZoneDelegate.invokeTask (zone.js:420)

我在表单组的必填字段上收到此错误.

我的ts文件代码

        import { Component, OnInit } from '@angular/core';
        import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms'
         import {ActivatedRoute, Router} from "@angular/router";

     @Component({
   selector: 'app-add-new-connections',
 templateUrl: './add-new-connections.component.html',
 styleUrls: ['./add-new-connections.component.scss']
})
export class AddNewConnectionsComponent {

 addNewConnectionForm: any;

 constructor(public fb: …

我是角度4的新手,我正在尝试配置bootstrap.我安装了ng-bootstrap:

https://ng-bootstrap.github.io/#/getting-started

我在页面上做了所有的事情,但我在页面上看不到引导程序.这是我的代码:

SRC /应用程序/ app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
   BrowserModule,
   FormsModule,  // add  this
   NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

SRC /应用程序/ app.component.html

<div class="container">

<h1 class="text-primary">{{title}} </h1>

<h2 class="text-primary">My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)"> …

我有一些基本上为其设计的自定义指令<input>.我有一个自定义组件<app-decorated-input>

有一吨<app-decorated-input>用简单的一起小号<input>在我对其中一些我喜欢用指令的应用和为别人我不知道.如何使用指令<input>时如何将指令传递给底层:

<app-decorated-input directive1 directive2 ></app-decorated-input>

并且对底层的指令具有相同的效果,<input>就像它直接在它上面使用一样:

 <input type="text" directive1 directive2 >

更新:

<app-decorated-input>除了它包含<input>我已经提到过的事实之外,里面的内容并没有多大意义.它的模板看起来类似于:

<div> Some decorations here </div>
<div> 
  <input type="text" {...directives}> <!-- In ReactJS this is done by using {...this.props} -->
</div>
<div> Some decorations here too! </div>

我想做的就是将指定的所有指令转移<app-decorated-input>到底层<input>.

我想创建一个类似于我所附图片的图表,或者可能是条形图.我正在使用Angular 4,我不知道Angular中的图形.是参考链接还是一些示例代码？

[![图表] [1] [1]

注意:我在经典HTML表中成功完成了FormArray,如下所示.我希望在Angular Material表中有一个FormArray并用数据填充它.我尝试了与经典HTML表格相同的方法,但我无法编译它,因为错误"无法找到带有'name'的列'''"

<div class="form-group">
<form [formGroup]="myForm" role="form">
  <div formArrayName="formArrList">
    <table>
      <tr>
        <th>Name</th>
        <th>School</th>

      </tr>

      <tr *ngFor="let list of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">
        <td>
          <div class="col-sm-6">
            <input class="form-control" type="text"  formControlName="name"/>
          </div>
        </td>
        <td>
          <div class="col-sm-6">
            <input class="form-control" type="text"  formControlName="school"/>
          </div>
        </td>
      </tr>
    </table>
  </div>
</form>

我尝试在Angular Material Table中有一个FormArray这是我的HTML文件

<div>
<form [formGroup]="myForm" role="form">
  <ng-container formArrayName="formArrList">

  <mat-table #table [dataSource]="myDataSource">
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>


    <ng-container *ngFor="let detailsItems of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">


    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let …

我正在向父组件表单添加子组件.

Pessoa.html

<form [formGroup]="usuarioForm" novalidate>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="exampleInputNome">Nome</label>
                        <input type="text"
                               formControlName="nome"
                               class="form-control "
                               placeholder="Nome" />
                    </div>
                </div>

            <endereco [enderecoGroup]=usuarioForm></endereco>

            <button type="submit"
                    class="btn btn-default"
                    (click)="InsereUsuario(usuarioForm.value)">
                Enviar
            </button>
</form>

Endereco.html

            <h4>Endereço</h4>
            <div class="col-md-2">
                <div class="form-group" [formGroup]="enderecoGroup">
                    <label for="exampleInputCep">Cep</label>
                    <input type="text"
                           class="form-control"
                           placeholder="Cep"
                           (blur)="GetAdress($event.target.value)">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group" [formGroup]="enderecoGroup">
                    <label for="exampleInputComplemento">Complemento</label>
                    <input type="text"
                           class="form-control"
                           placeholder="Complemento"
                           [value]=endereco?.complemento>
                </div>
            </div>

Endereco.ts

@Input() enderecoGroup: FormGroup;

endereco: Endereco

GetEndereco(Cep: string) {
    this.servico.GetEndereco(Cep)
        .subscribe(resposta => this.endereco = resposta);
}

提交表单时,Adress.html条目为空白,我该怎么办？

我正在使用React表单

Stackblitz