我有一个Angular 2应用程序,它使用该ReactiveForms模块来管理使用自定义验证器的表单.验证器接收一个FormControl对象.我有一些输入字段可以使用相同的自定义验证器,只要我知道FormControl传递给验证器时字段的名称.

我找不到任何FormControl公开输入字段名称的方法或公共属性.当然,它很容易看到它的价值.以下显示了我想如何使用它:

public asyncValidator(control: FormControl): {[key: string]: any} {
  var theFieldName = control.someMethodOfGettingTheName(); // this is the missing piece

  return new Promise(resolve => {
      this.myService.getValidation(theFieldName, control.value)
        .subscribe(
          data => {
            console.log('Validation success:', data);
            resolve(null);
          },
          err => {
            console.log('Validation failure:', err);
            resolve(err._body);
          });
    });
  }

我是Angular的新手,我正在尝试使用它来设置id为"input1"的输入.我使用以下代码:

@ViewChild('input1') inputEl: ElementRef;

然后在组件中:

 this.inputEl.nativeElement.focus();

但它没有用.我究竟做错了什么？任何帮助都感激不尽.

我在stackoverflow中的许多问题中发现了这个问题,但没有运气.请帮我弄清楚我做错了什么.

在组件中:

ngOnInit() {
    this.companyCreatForm = this._formBuilder.group({
      name: [null, [Validators.required, Validators.minLength(5)]],
      about: [null, [Validators.required]],
      businessType: [null, [Validators.required]],
      address: this._formBuilder.group({
        street: [],
        website: [null, [Validators.required]],
        mobile: [null, [Validators.required]],
        email: [null, [Validators.required]],
        pageId: [null, [Validators.required]],
      }),
    });

表格:

<form [formGroup]="companyCreatForm" (ngSubmit)="creat_company()" novalidate class="form-horizontal">
    <div class="panel panel-default" *ngIf="generalPanel">
        <div class="panel-heading">General Info</div>
        <div class="panel-body">
            <div class="form-group">
                <label for="comapny name" class="col-sm-3 control-label">Company's Name</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" placeholder="Company's Name" formControlName="name" #refName>
                    <div *ngIf="companyCreatForm.controls['name'].hasError('required') && refName.touched" class="alert alert-danger">
                        please enter name
                    </div>
                    <div *ngIf="companyCreatForm.controls['name'].hasError('minlength')" class="alert …

是活性形式,以去具有可以聆听到它包含并执行一些成分,它的方法形式的有效性状态变化的组件的方式吗？

使用templateRef就可以很容易地禁用模板中的提交按钮[disabled]="#myForm.invalid",但这不涉及组件的逻辑.

看模板表单'doc我没找到方法

我在角度4世界中相当新,我试图在Angular Material设计中使用Angular 4为md-table组件添加每个行和标题列的"编辑/删除"按钮是"Action".我该怎么办？这个？每行的自定义标题列和按钮.任何可用的模板吗？下面是我的HTML代码.

userinfo.html

<!-- ID Column -->
<ng-container cdkColumnDef="username">
<md-header-cell *cdkHeaderCellDef> User Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.username}} </md-cell>
</ng-container>

<!-- Email Column -->
<ng-container cdkColumnDef="email">
<md-header-cell *cdkHeaderCellDef> Email </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.email}} </md-cell>
</ng-container>

<!-- First Name Column -->
<ng-container cdkColumnDef="userFirstName">
<md-header-cell *cdkHeaderCellDef> First Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.userFirstName}} </md-cell>
</ng-container>

<!-- Last Name Column -->
<ng-container cdkColumnDef="userLastName">
<md-header-cell *cdkHeaderCellDef> Last Name </md-header-cell>
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.userLastName}} </md-cell>
</ng-container> 

<!-- Phone Column -->
<ng-container cdkColumnDef="userMobile"> …

在我的Angular 4应用程序中,我有一个包含多个控件的表单.

在某些方面,我需要强制更新其有效性,所以我正在做:

this.form.get('control1').updateValueAndValidity();
this.form.get('control2').updateValueAndValidity();
this.form.get('control3').updateValueAndValidity();
// and so on....

然后:

this.form.updateValueAndValidity();

这很好用.

然而,我想知道是否有更好的方法来完成相同的事情,只需在父窗体上调用一个方法.

根据其文档,updateValueAndValidity()方法:

默认情况下,它还会更新其祖先的值和有效性.

但在我的情况下,我需要更新其后代的价值和有效性.所以我可以摆脱许多代码行.

今天我意识到Angular 5中反应形式的意外(对我来说)行为.服务器从应用程序接收一个值为"null"而不是null值的字符串,这就是我想要的.

我做了以下测试:

https://stackblitz.com/edit/angular-rjrspr?file=app%2Fapp.component.html

正如您在下图中所看到的,如果我[value]="null"在select中使用,该字段将获得"null"(字符串文字)作为值.但是,如果我使用[ngValue]="null"它获得预期null值.

我认为使用的value是用于反应形式,而ngValue用于模板驱动的形式.我想知道在我的表格中使用两者是否安全(我总是使用反应形式),如果对不同的行为有任何解释.

谢谢!

我有一个FormGroup如下定义:

this.businessFormGroup: this.fb.group({
    'businessType': ['', Validators.required],
    'description': ['', Validators.compose([Validators.required, Validators.maxLength(200)])],
    'income': ['']
  })

现在,当businessType是Other,我想删除Validators.required的验证description.如果businessType不是Other,我想加回来Validators.required.

我使用以下代码动态添加/删除Validators.required.但是,它会清除现有的Validators.maxLength验证程序.

if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.get('description').validator = <any>Validators.compose([Validators.required]);               
} else {                
    this.businessFormGroup.get('description').clearValidators();               
}

this.businessFormGroup.get('description').updateValueAndValidity(); 

我的问题是,在添加/删除required验证器时如何保留现有的验证器.

我有一个像这样创建的FormGroup：

form: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

this.form = this._formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required, Validators.email]
});

当事件发生时，我想禁用这些输入，因此，在我添加的HTML中：

<input class="form-control" placeholder="Name" name="name" formControlName="name" [(ngModel)]="name" autocomplete="off" [disabled]="isDisabled" required>

<input class="form-control" placeholder="Email" name="email" formControlName="email" [(ngModel)]="email" email="true" autocomplete="off" [disabled]="isDisabled" required>

当发生上述事件时，isDisabled我将切换到哪里true？

可以想象，我收到消息：

看来您正在使用带有反应形式指令的Disabled属性。如果在组件类中设置此控件时将Disabled设置为true，则实际上将在DOM中为您设置disabled属性。我们建议使用这种方法来避免“检查后更改”错误。

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Run Code Online (Sandbox Code Playgroud)

因此，通过显示该警告的示例并进行了一些搜索，我发现我应该声明自己的控件，例如：

name: [{ value: '', disabled: this.isDisabled }, Validators.required]

问题是：当变量在两个变量之间切换时，它不会在禁用/启用之间切换true/false

如何使变量控制输入是启用还是禁用的正确方法？

我不想手动执行该操作（例如：），this.form.controls['name'].disable() …

我知道创建自定义的控件作为组件,但我无法弄清楚如何创建自定义组.

同样,我们可以做到这一点实现ControlValueAccessor,并使用自定义组件一样<my-cmp formControlName="foo"></my-cmp>,我们如何才能达到这种效果一组？

<my-cmp formGroupName="aGroup"></my-cmp>

两个非常常见的用例是:(a)将长形式分为几个步骤,每个步骤分别在一个单独的组件中;(b)封装一组出现在多种形式的字段,例如地址(国家,州,城市组) ,地址,建筑物编号)或出生日期(年,月,日).

用法示例(不是实际工作代码)

Parent具有以下形式FormBuilder:

// parent model
form = this.fb.group({
  username: '',
  fullName: '',
  password: '',
  address: this.fb.group({
    country: '',
    state: '',
    city: '',
    street: '',
    building: '',
  })
})

父模板(为简洁起见,不可访问和非语义):

<!-- parent template -->
<form [groupName]="form">
  <input formControlName="username">
  <input formControlName="fullName">
  <input formControlName="password">
  <address-form-group formGroup="address"></address-form-group>
</form>

现在AddressFormGroupComponent知道如何处理在其中具有这些特定控件的组.

<!-- child template -->
<input formControlName="country">
<input formControlName="state">
<input formControlName="city">
<input formControlName="street"> …