标签: angular4-forms

注意:我在经典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 …

我有一个表单和这样的底层模型

来自组件

myTextModel: string;
updateMyTextModel(): void {
    this.myTextModel = "updated model value";
    //todo- set form dirty (or invalid or touched) here
}

Html模板

<form #testForm="ngForm" id="testForm">
  <input type="text" id="myText" [(ngModel)]="myTextModel" name="myText" #myText="ngModel">
</form>
<button (click)="updateMyTextModel()">Update myTextModel</button>
<div *ngIf="testForm.dirty">testForm diry</div>
<div *ngIf="testForm.touched">testForm touched</div>

如何从代码中设置触摸或脏的表单？

注意:在此示例中,我使用按钮来触发模型更改,但我也可能以其他方式更新模型,例如在来自web api异步请求的回调中.

已经发布了许多针对此错误的博客,但没有为angular4指定任何博客.

我在表单上添加和删除动态控件

在初始化期间向窗体添加控件

ngOnInit() {

    this.lienHolder = this._fb.group({
      emailAddress: ['', [Validators.required, Validators.email]],
      policyDetails: this._fb.array([
        this.initPolicyTemplate(),
      ])
    });

  }

 initPolicyTemplate() {
    return this._fb.group({
      policyNumber: ['', [Validators.required, Validators.pattern("(^[^0][A-Z]{1}[0-9]*$)")]],
      vinNumber: ['', [Validators.required, Validators.pattern('^[0-9]{6}$')]],
    });
  }

通过调用此方法添加更多控件

 addPolicyTemplate() {
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.push(this.initPolicyTemplate());
  }

从表单中删除控件

  removePolicyTemplate(i: number) {  
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.removeAt(i);
  }

但是当我构建代码时,我得到这样的错误

这是我的HTML

  <div formArrayName="policyDetails">
        <div *ngFor="let _policy of lienHolder.controls.policyDetails.controls; let i=index">
          <div class="panel panel-default">
            <div class="panel-head">
              <div class="glyphicon glyphicon-remove pull-right" *ngIf="lienHolder.controls.policyDetails.controls.length > 1" (click)="removePolicyTemplate(i)"></div>
            </div>
            <div class="panel-body">
              <div [formGroupName]="i"> …

我的要求是构建一个具有2个或更多html模板的组件,其中每个html模板至少有20个控件,并且基于少数条件加载该特定模板.

注意:我选择了3个不同的模板,因为控件因templateType而异,其中作为输入的单个ts文件和驱动模板中值的保存逻辑保持不变.因此我决定使用3个模板和一个ts文件作为单个组件.

//sub.component.ts
@Component({
     selector: 'sub-component',
     template: `
               <div [ngSwitch]="templateType">
                    <ng-template *ngSwitchCase="'1'"> ${require('./sub1.component.html')} </template>
                    <ng-template *ngSwitchCase="'2'"> ${require('./sub2.component.html')} </template>
                    <ng-template *ngSwitchCase="'3'"> ${require('./sub3.component.html')} </template>
                    <ng-template ngSwitchDefault> ${require('./sub1.component.html')} </template>
</div>
    `
})

我已经尝试过上面的替代方案,因为它看起来像一个简单的解决方案来实现行为,但编译失败,无法找到需要.在AngularJS中,我们有ng-Include来填充任何模板,但它看起来ng-template不支持加载外部html内容.

请不要将此标记为重复,因为出现了许多与此类似的查询,但大多数解决方案已弃用或不适用于Angular 4.请提供替代方案,而不是附加不同的链接.

我的表单有 10 到 15 个字段，我只想查看使用 form-b​​uilder 构建的 2 个字段的更改。

目前我可以使用以下代码查看表单中的所有字段：

  export class App {
  constructor(private formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      firstName: 'John',
      lastName: 'Fleming',
      Name: 'John Fleming',
      Address : '12331 wiley post',
      city: '',
      state:'',
      ...... so on    
    })

    this.form.valueChanges.subscribe(data => {
      console.log('Form changes', data)
      this.output = data
    })
  }
}

我不想观看所有字段，我现在在这些字段上使用 (keyup) 事件来处理它。但我想知道在 angular2 中是否有更好的方法来做同样的事情？

我试图在我的视图上绑定我的模型,但是当我提交表单时我遇到了问题:我没有数组,但有很多属性.

零件 :

export class QuizFormAddQuestionComponent implements OnInit {
    public question: Question;

    constructor() {
        this.question = new Question();
    }

    ngOnInit() {
        this.question.setModel({ question: 'test' });
        this.question.setAnswers(3);
    }

    createQuestion(form) {
        console.log(form.value);
    }

}

我的模板:

<hello name="{{ name }}"></hello>

<div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-10">

        <form #form="ngForm" (ngSubmit)="createQuestion(form)" class="mt-4">
            <div class="form-row">
                <div class="form-group col-md-12">
                    <label for="question" class="col-form-label">Question</label>
                    <input type="text"
                           class="form-control"
                           id="question"
                           placeholder="Enter your question..."
                           name="question"
                           [ngModel]="question.question"
                           required>
                </div>
            </div>
            <div class="form-group row" *ngFor="let answer of question.answers; let i = index;">
                <div class="col-sm-12"> …

如何在primeng自动完成框中显示多个字段.

例如:

<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name,lastname"></p-autoComplete>

or 
<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name+' '+lastname"></p-autoComplete>

但是这不起作用.当我在一个字段属性中传递2个值时,如上所示,它不会在用户界面中显示任何值,对于单个值,它可以完美地工作

(例如:-field = "名称")

.

这个问题已经说过,但不幸的是没有答案对我有用.

这是我的问题(角5):

<option 
    *ngFor="let country in countries" 
    [value]="country.id" >
       {{'page.choose_country' | translate}} *
</option>

我有一个简单的代码,但它仍然显示我这个错误:

无法绑定到'ngForIn',因为它不是'option'的已知属性.

它不接受select中的*ngFor(我输入相同的结果)

我已经发现了几个类似的答案commModule,并bowersModule需要被导入到模块或把b .....我想在这里找到解决方案,但没有任何工程.

尽管我的英语很可怕,但我希望你能理解我一点点.感谢您的答复

我使用的是 Angular 4 简单表单，使用命令行编译项目时出错，如何解决警告。参见错误图1：https : //i.stack.imgur.com/N1AH4.png

>     WARNING in Circular dependency detected:
>     src\app\shopinfo\shopinfo.component.ts -> src\app\shopinfo\shopinfo.module.ts ->
> src\app\shopinfo\shopinfo.routing.ts ->
> src\app\shopinfo\shopinfo.component.ts

Run Code Online (Sandbox Code Playgroud)

component.ts： 下面是我的component.ts，这里声明component.html值的表单值

  [import {Component, OnInit, ViewEncapsulation, ElementRef, OnDestroy} from '@angular/core';
    import {FormGroup, FormControl, Validators} from "@angular/forms";
    import {IOption} from "ng-select";
    import {ShopInfo} from './shopinfo.module';    
    @Component({
      selector: 'app-shopinfo',
      templateUrl: './shopinfo.component.html',
      styleUrls: \['./shopinfo.component.css'\]
    })    
    export class shopinfoComponent implements OnInit {
      myForm: FormGroup;
      shopinformation: any;
      submitted: boolean;
      constructor(private shopinfo: ShopInfo) {
        let shopname = new FormControl('', Validators.required);
        let …

我正在使用 Angular 4。我想允许zipCode输入字段仅接受长度为 5 或 7 位的输入。

HTML 代码：

<md-input-container class="fill-width-input-wrap">
    <input mdInput placeholder="Zip Code" formControlName="zipCode" minLength="5" maxLength="7" (keypress)="allowOnlyNumbers($event)" required>
    <md-error *ngIf="clientInformationForm.controls['zipCode'].hasError('required')">
        Please enter
        <strong>valid zipcode</strong>
    </md-error>
    <md-error *ngIf="clientInformationForm.controls['zipCode'].hasError('minLength')">
        zip code
        <strong>minimum length is 5</strong>
    </md-error>
</md-input-container>