标签: angular2-forms

我有这样的数据

[{value: 6, name: "delete-wews", checked: false}
{value: 5, name: "update-user", checked: false}
{value: 4, name: "search-user", checked: true}
{value: 3, name: "list-user", checked: false}
{value: 2, name: "find-user", checked: false}
{value: 1, name: "create-user", checked: true}]

现在，在我的模板中，它看起来是这样的，但是当它显示在浏览器上时，它会检查所有复选框，即使其值为 false。它应该检查“checked”键是否为真，否则它应该为假。

<div class="checkbox" *ngFor="let permission of permissions">
      <label>
         <input type="checkbox"
            name="permissions"
            [(ngModel)]="permission.checked"
            value="{{permission.id}}">
            {{permission.name}}
     </label>
</div>

我的控制器代码是这样的 https://gist.github.com/eaponiente/cc108bfafb2789229e917283e0b8db09

我试图验证使用表达式提交的电子邮件输入^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$，但它引发了错误 Range out of order in character class at RegExp。我如何使用该表达式进行验证

 ngOnInit() {
    // created FormGroup using FormBuilder
    this.courseForm = this.fb.group({
      username: [null, [Validators.required, Validators.pattern('^[a-z0-9_-]{3,16}$')]],
      email: [null, [Validators.required, Validators.pattern('^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$')]],
      address: (null),
      select: (null)
    });

我正在使用 Angular4 和 Angular Material2。

我有以下代码

<md-tab-group color="primary">
        <md-tab label="Employee">
            <app-employee></app-employee>
        </md-tab>
        <md-tab label="Department">
            <app-department></app-department>
        </md-tab>
        <md-tab label="Attendance">
            <app-attendance></app-attendance>
        </md-tab>
    </md-tab-group>

现在，所有组件均已初始加载，但我想在选择相应选项卡时加载特定组件。

在此演示中，我为自定义验证器创建了一个示例表单，这里有“起始日期”和“截止日期”以及“起始时间”和“截止时间”，工作正常：对于“起始日期”和“截止日期”验证工作正常并显示错误消息。

问题：当选择相同的日期时，例如）2018 年 7 月 21 日作为起始日期，并且“To date e”和“In from Time”为 4:00 AM，“To Time”为 3:00AM，条件得到满足，但没有显示错误消息。在实施过程中出现了一些问题，任何人都可以帮我解决吗？

在 html 中，我给出了验证消息，但没有显示。

To Time:
<input type="time" formControlName="ToTime">
    <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>

在组件中：

 DaterForm : FormGroup;

constructor(private fb:FormBuilder){
}
   ngOnInit(){

 this.DaterForm = this.fb.group(
{
  FromDate:['',[AppCustomDirective.fromDateValidator]], // validation working fine
  FromTime:[''],
  ToDate:['',[AppCustomDirective.ToDateValidator]],// validation working fine
  ToTime:['']
},{validator:[AppCustomDirective.timeValidator] // validation not working
}

自定义验证：

import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';

export class AppCustomDirective …

角度版本 5.2.4，Material2 5.2.4

我正在使用这种元素组合：

• 垫式形式场
• 使用 matinput 指令输入
• 垫日期选择器
• 垫日期选择器切换

...以数据源更改时重建的形式。

我可以在初始表单构建中将输入和 mat-datepicker-toggle 设置为禁用或启用。重建表单时，可以设置输入的禁用属性。但是，对于初始表单构建后的任何表单重建，mat-datepicker-toggle 的禁用属性仍保持初始状态（无论是启用还是禁用）。

材料文档指出（我在此处的元素周围使用引号）：

与任何标准“输入元素”一样，可以通过添加禁用属性来禁用日期选择器输入。默认情况下，“mat-datepicker”和“mat-datepicker-toggle”将从“输入元素”继承其禁用状态

因此，在之后设置 mat-datepicker-toggle 的禁用/启用状态是我试图解决的问题。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MatDatepickerModule, MatIconModule,
  MatInputModule, MatNativeDateModule,} from '@angular/material';

@NgModule({
  exports: [ MatDatepickerModule, MatIconModule,
    MatInputModule, MatNativeDateModule ]
})
export class MaterialModule { }

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule, 
MaterialModule ], …