从angular

Question

我想基于输入标志进行验证，但是不幸的是，它未能通过验证。如果我使用模板验证，那么它将失败，或者如果我使用表单验证，则它将起作用。但是为了满足我的要求，我需要使用基于模板的验证。

下面是代码和屏幕截图

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
        <h1>Angular Sample </h1>
        <form [formGroup]="countryForm">
        <input type="checkbox"
                   formControlName="city" /> Is Other City 
        <ng-container *ngIf='countryForm.value.city'>
        <hr />
        <label>City : </label>
        <input 
                   required='true'
                   placeholder="Enter city Name"
                   formControlName="cityName" />
        </ng-container>
        <hr />
        <button [disabled]="countryForm.invalid">Submit</button>
        </form>
`
})
export class AppComponent {

  countryForm: FormGroup = new FormGroup({
    city: new FormControl(),
    cityName: new FormControl(),
  });
  constructor() { }
}

Answer 1

您可以通过使用禁用属性设置为true的新FormControl实例化来启用/禁用表单控件。 FormControl({value: '', disabled: true})

然后根据需要使用control.disable（）或control.enable（）方法启用或禁用该方法。

app.component.ts

constructor() {
    this.countryForm = new FormGroup({
      city: new FormControl(),
      cityName: new FormControl({ value: '', disabled: false }),
    });


    this.countryForm.get('city').valueChanges.subscribe(v => {
      v ? this.countryForm.get('cityName').enable() : this.countryForm.get('cityName').disable();
    })
  } 

示例：https://stackblitz.com/edit/stack-overflowexample