Ggtcf

What was the implant device Captain Marvel was using?

School performs periodic password audits. Is my password compromised?

How does NOW work?

How to detect if C code (which needs 'extern C') is compiled in C++

How can I ensure my trip to the UK will not have to be cancelled because of Brexit?

Rewrite the power sum in terms of convolution

In the quantum hamiltonian, why does kinetic energy turn into an operator while potential doesn't?

Are babies of evil humanoid species inherently evil?

At what distance can a bugbear, holding a reach weapon, with Polearm Mastery, get their Opportunity Attack?

Why was Goose renamed from Chewie for the Captain Marvel film?

Can I pump my MTB tire to max (55 psi / 380 kPa) without the tube inside bursting?

Accepted offer letter, position changed

How strictly should I take "Candidates must be local"?

Can you reject a postdoc offer after the PI has paid a large sum for flights/accommodation for your visit?

When a wind turbine does not produce enough electricity how does the power company compensate for the loss?

Intuition behind counterexample of Euler's sum of powers conjecture

Reversed Sudoku

Expressing logarithmic equations without logs

NASA's RS-25 Engines shut down time

Can one live in the U.S. and not use a credit card?

PTIJ: Should I kill my computer after installing software?

List elements digit difference sort

What is the cause of the Apocalypse in The Umbrella Academy?

Is "history" a male-biased word ("his+story")?

Remove template based Validation after input element removed from html in angular

0

I wanting to do validation based on input flag, But unfortunately it fails my validation. If i use template validation it fails or if i use Form Validation it works. But for satisfying my requirement i need to use template based validation.

Below is code and screen shot

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() 

angular angular6

share|improve this question

asked Mar 7 at 6:24

Hamid Raza NooriHamid Raza Noori

4212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What is the issue?
  
  – Chellappan
  Mar 7 at 6:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Valid Flag is not updating after disappear city Name from UI.
  
  – Hamid Raza Noori
  Mar 7 at 8:20
  

  
  
  
  

add a comment | 

0

I wanting to do validation based on input flag, But unfortunately it fails my validation. If i use template validation it fails or if i use Form Validation it works. But for satisfying my requirement i need to use template based validation.

Below is code and screen shot

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() 

angular angular6

share|improve this question

asked Mar 7 at 6:24

Hamid Raza NooriHamid Raza Noori

4212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What is the issue?
  
  – Chellappan
  Mar 7 at 6:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Valid Flag is not updating after disappear city Name from UI.
  
  – Hamid Raza Noori
  Mar 7 at 8:20
  

  
  
  
  

add a comment | 

I wanting to do validation based on input flag, But unfortunately it fails my validation. If i use template validation it fails or if i use Form Validation it works. But for satisfying my requirement i need to use template based validation.

Below is code and screen shot

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() 

angular angular6

share|improve this question

asked Mar 7 at 6:24

Hamid Raza NooriHamid Raza Noori

4212

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() 

angular angular6

angular angular6

share|improve this question

asked Mar 7 at 6:24

Hamid Raza NooriHamid Raza Noori

4212

share|improve this question

asked Mar 7 at 6:24

Hamid Raza NooriHamid Raza Noori

4212

asked Mar 7 at 6:24

Hamid Raza NooriHamid Raza Noori

4212

asked Mar 7 at 6:24

Hamid Raza NooriHamid Raza Noori

4212

1 Answer
1

active

oldest

votes

0

You can enable/disable a form control by using Instantiate a new FormControl with the disabled property set to true. FormControl(value: '', disabled: true)

Then Using control.disable() or control.enable() method to enable or disable, method as per your need.

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();
 )
 

Example:https://stackblitz.com/edit/stack-overflowexample

share|improve this answer

answered Mar 7 at 9:04

ChellappanChellappan

5,5862420

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55037304%2fremove-template-based-validation-after-input-element-removed-from-html-in-angula%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You can enable/disable a form control by using Instantiate a new FormControl with the disabled property set to true. FormControl(value: '', disabled: true)

Then Using control.disable() or control.enable() method to enable or disable, method as per your need.

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();
 )
 

Example:https://stackblitz.com/edit/stack-overflowexample

share|improve this answer

answered Mar 7 at 9:04

ChellappanChellappan

5,5862420

add a comment | 

0

You can enable/disable a form control by using Instantiate a new FormControl with the disabled property set to true. FormControl(value: '', disabled: true)

Then Using control.disable() or control.enable() method to enable or disable, method as per your need.

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();
 )
 

Example:https://stackblitz.com/edit/stack-overflowexample

share|improve this answer

answered Mar 7 at 9:04

ChellappanChellappan

5,5862420

add a comment | 

You can enable/disable a form control by using Instantiate a new FormControl with the disabled property set to true. FormControl(value: '', disabled: true)

Then Using control.disable() or control.enable() method to enable or disable, method as per your need.

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();
 )
 

Example:https://stackblitz.com/edit/stack-overflowexample

share|improve this answer

answered Mar 7 at 9:04

ChellappanChellappan

5,5862420

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();
 )
 

share|improve this answer

answered Mar 7 at 9:04

ChellappanChellappan

5,5862420

answered Mar 7 at 9:04

ChellappanChellappan

5,5862420

answered Mar 7 at 9:04

ChellappanChellappan

5,5862420