标签: angular-forms

我是Angular的新手.我正在使用角度4反应形式,并想出如何执行自定义验证.以下是我对数字的实现

function numberValidator(c: AbstractControl): { [key: string]: boolean } | null {
    if (c.pristine) {
        return null;
    }
    if (c.value.match(/.*[^0-9].*/)) {
        return { 'numeric': true };
    }
    return null;
}

 phoneControl: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10), numberValidator]],

我试图找出如何执行货币(有或没有两位小数)和最重要的日期字段.

原谅我,如果这在其他地方得到解答,但我找不到任何角度样本(4)

谢谢你的时间

我用角度5创建了一个模板驱动的表单

我想首先禁用整个表单,并且还希望在单击某个按钮后启用表单,因此我在表单标记中添加了一个禁用的属性,并使其值为false,如下所示(这不起作用)虽然):

<form #formName = "ngForm" [disabled]="true">
</form>

由于上面的禁用属性不起作用,我将禁用的属性更改为

[attr.disabled] = true

这也行不通

现在因为我有表单元素的引用#formName,我在TS文件中使用它并尝试更改引用对象内的disabled属性值

这就是我所做的:

@ViewChild('formName') formName;


this.formName.disabled = true; 

这也没有用,我得到一条错误消息说禁用无法更改,因为它只是一个吸气剂

默认情况下,如何在模板驱动表单的角度中禁用整个表单？

提前致谢 :)

我正在构建一个应该是动态的Web表单.
当用户从列表中选择选项时,将根据其输入生成下一个表单输入.
例如:

<mat-form-field>
     <mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="TypeChosen(row.Type, row)">
         <mat-option [value]="0">Treatment</mat-option>
         <mat-option [value]="1">Travel</mat-option>
         <mat-option [value]="2">Medication</mat-option>
         <mat-option [value]="3">Equipment</mat-option>
     </mat-select>
</mat-form-field>

如果他选择类型'治疗',他会获得另一个选择输入,其中包含一些其他输入的选项,如果他选择不同的类型,他会获得不同的选项和其他输入.

我知道我需要动态生成HTML内容,也许是动态组件.
以简单的方式做到这一点的最佳方法是什么？

我有一个父组件，我想在其中创建和存储我的反应式表单。表单数组中将有多个表单组实例。我想将表单控件从每个表单组传递给子组件，但是在弄清楚如何做到这一点时遇到了麻烦。

这是一个Stackblitz，演示了我想做的事。另外，某些字段仅适用于汽车的某些“品牌”，这就是为什么我的html中包含以下行：

<input type="text" *ngIf="car.make != 'ford'" formControlName="model">

我想将“详细信息”表单组字段移到“详细信息字段”子组件中，但是当我尝试这样做时，它告诉我我没有表单组实例，所以我知道父表单组是未在子组件中注册。任何帮助深表感谢。

我正在使用最新版本的Angular（v6.0.5）。

我有一个由3个通用控件组成的FormGroup，根据某些逻辑，我想将其他多个控件添加到同一FormGroup中。

我知道我可以使用，this.form.addControl()但我不想为每个单独的表单控件执行此操作

是否有捷径可寻？

例：

this.form = this.formBuilder.group({
    'id': new FormControl('', Validators.required),
    'firstName' new FormControl('', Validators.required),
    'lastName' new FormControl('', Validators.required)
});

if (blah) {
    // Append more FormControls here to same FormGroup
    this.form.addControl('houseNumber', new FormControl(''));
    this.form.addControl('street', new FormControl(''));
    this.form.addControl('postCode', new FormControl(''));
}

我正在构建一个 CRUD 应用程序 Angular 6.

我的表单用于添加和更新项目。当用户更新项目时，表单会从服务器预先填充。当服务器更新表单时，它会触发验证。

如何在不触发验证的情况下更新表单值？

这是相关的代码：

ngOnInit(){
    this.form = this.fb.group({
        name: ['', [Validators.required], MyAsyncValidator],
        comments: [''],
    });

    this.http.get('/api')
        .subscribe((data: any) => {
            this.form.setValue({ name: data.name, comments: data.comments });
        });
    //How to populate form without triggering validation
}

模板：

<form [formGroup]="form">
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
        <input formControlName="name"
            class="form-control"
            [ngClass]="{'is-invalid': isInvalid(form.controls.name)}"
            type="text">
        <small *ngIf="form.get('name').status=='PENDING'" class="form-text text-muted">
            <i class="fa fa-spinner fa-spin"></i> Checking Name...
        </small>
        <small class="invalid-feedback">
            <div *ngIf="form.controls['name'].hasError('required')">Name Required</div>
            <div *ngIf="form.controls['name'].hasError('exists')">Name Exists</div>
        </small>
    </div>
</div>

我正在使用Angular Material v6.0带有复选框的 MatTreeModule (mat-tree)。但是我很难弄清楚如何确定哪些节点已被检查，哪些节点尚未被检查。在 Angular Material 的示例中，他们提供了非常好的源代码来设置它，我能够很好地设置它。

但是，我无法确定哪些复选框已被选中，哪些未选中。我已经尝试了几个小时试图解决这个问题，但没有运气。

我的目标是最终用户将选中或取消选中树中的复选框，从那里开始，我需要在他们做出选择后运行一些过程。

但是我完全陷入了试图找出哪些 mat-tree-nodes 被检查和未检查的问题，而且我在任何地方都找不到好的工作示例。

关键源代码在这里

可以在此处找到有关 mat-tree 的更多信息

任何人都可以帮助确定复选框是否已被选中？

谢谢。

根据请求，我在此处从两个代码文件中添加代码：

app/tree-checklist-example.ts app/tree-checklist-example.html

来自“app/tree-checklist-example.ts”的打字稿源代码

import {SelectionModel} from '@angular/cdk/collections';
import {FlatTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';

/**
 * Node for to-do item
 */
export class TodoItemNode {
  children: TodoItemNode[];
  item: string;
}

/** Flat to-do item node with expandable and level information */
export class TodoItemFlatNode …

我有一个包含很多表单控件和一些控件的验证器的表单，例如：

title = new FormControl("", Validators.compose([
    Validators.required
]));
description = new FormControl("", [
    Validators.required,
    Validators.minLength(1),
    Validators.maxLength(2000)
]);

如何添加不验证控件的另存为草稿按钮？或删除它们？

我尝试了很多示例，例如：

saveDraft() {
   this.addProjectForm.controls.title.clearValidators();
   this.addProjectForm.controls.title.setErrors(null);
   this.addProjectForm.controls.title.setValidators(null);
}

要么

saveDraft() {
   this.addProjectForm.controls['title'].clearValidators();
   this.addProjectForm.controls['title'].setErrors(null);
   this.addProjectForm.controls['title'].setValidators(null);
}

但没有任何效果..

我在设置模板驱动的表单输入的值时遇到问题。该值来自一个editMovie对象。我希望在显示时用 editMovie 值填充表单，然后用户可以编辑 editMovie 对象的一部分或保持不变。为没有[(ngModel)]附加到它们的输入正确设置表单值，但不会设置默认值。下面是一个例子：

<div class="form-group">
    <label for="imdb">Edit IMDb ID</label>
    <input #editImdb type="text" class="form-control" name="imdb" [(ngModel)]="editReviewForm.imdb" [value]="editMovie.imdb" required="" />
    <div class="mt-1" style="color:red">
        *required
    </div>
</div>

<div class="form-group">
    <label for="trailer">Edit Youtube Trailer</label>
    <input #editTrailer type="text" class="form-control" name="trailer" value="{{ editMovie.trailer }}" />
</div>

第一个不起作用，而第二个起作用。按照此处的SO 问题，我尝试将 value 属性置于像这样的双向数据绑定中：[(value)]但这不起作用。按照这个SO 问题，我尝试过，[ngValue]但这在浏览器中引发了解析错误Can't bind to 'ngValue' since it isn't a known property of 'input'

有人知道如何绑定模板驱动的表单输入的值吗？

我正在尝试创建带有角度形式的 PrimeNg 可编辑表格。

app.component.ts（这是最小的可重现代码）

export class AppComponent implements OnInit {
    epForm: FormGroup;
    range: FormArray;

    constructor(private fb: FormBuilder,){
    }
    ngOnInit() {
        this.epForm = new FormGroup({});
        this.epForm.addControl('range', new FormArray([]));
        this.range = <FormArray>this.epForm.get('range');
        this.range.push(
        this.fb.group({
            type: ['X1 Gene']
        })
        );
    }
}

和 html 文件是

<form [formGroup]="epForm" novalidate>
    <p-table [value]="epForm.controls.range.value" [rows]="10" [responsive]="true">
        <ng-template pTemplate="header">
            <tr> Range </tr>
        </ng-template>
        <ng-template pTemplate="body" let-i="rowIndex">            
            <tr [formGroupName]='i'>
                <td >
                    <input type="text" pInputText formControlName="type" />
                 </td>
             </tr>
        </ng-template>
      </p-table>
</form>

我尝试使用上面的代码显示内容，但我无法编辑 Input 标签。我打开检查元素并检查它，只有tbody键更新。

我删除了[formgroup]='i'并在控制台中检查它我收到以下错误 …