In ts `is_edit = true` to disable...

    &lt;input [disabled]=&quot;is_edit==&#39;false&#39; ? true : null&quot; id=&quot;name&quot; type=&quot;text&quot; [(ngModel)]=&quot;model.name&quot; formControlName=&quot;name&quot; class=&quot;form-control&quot; minlength=&quot;2&quot;&gt;

		

I just simply want to disable a input based on `true` or `false`.


I tried following:

    [disabled]=&quot;is_edit==&#39;false&#39; ? true : null&quot;
    [disabled]=&quot;is_edit==&#39;true&#39;&quot;
    [disabled]=&quot;is_edit&quot;




How to disable a input in angular2

I have a reactive form in Angular like below:

&lt;!-- language: lang-ts --&gt;

    this.AddCustomerForm = this.formBuilder.group({
        Firstname: [&#39;&#39;, Validators.required],
        Lastname: [&#39;&#39;, Validators.required],
        Email: [&#39;&#39;, Validators.required, Validators.pattern(this.EMAIL_REGEX)],
        Picture: [&#39;&#39;],
        Username: [&#39;&#39;, Validators.required],
        Password: [&#39;&#39;, Validators.required],
        Address: [&#39;&#39;, Validators.required],
        Postcode: [&#39;&#39;, Validators.required],
        City: [&#39;&#39;, Validators.required],
        Country: [&#39;&#39;, Validators.required]
    });
    
    createCustomer(currentCustomer: Customer) 
    {
        if (!this.AddCustomerForm.valid)
        {
            //some app logic
        }
    }

this.AddCustomerForm.valid returns false, but everything looks good. 

I have tried to find with checking the status property in the controls collection. But I wonder if there is a way to find the invalid ones and display to the user?

How to find the invalid controls in Angular(v2 onwards) reactive form

I am aware that I can get the values of a form using

```ts
JSON.stringify(this.formName.value)
```

However, I want to get a single value from the form.

How do I go about doing that?

How to get a single value from FormGroup

I am having trouble finding out how to mark all form&#39;s fields as touched.
The main problem is that if I do not touch fields and try to submit form - validation error in not shown up. I have placeholder for that piece of code in my controller.  
My idea is simple: 

1. user clicks submit button
2. all fields marks as touched
3. error formatter reruns and displays validation errors

If anyone have other idea how to show errors on submit, without implementing new method - please share them. Thanks!

------------- 

**My simplified form:**
```html
&lt;form class=&quot;form-horizontal&quot; [formGroup]=&quot;form&quot; (ngSubmit)=&quot;onSubmit(form.value)&quot;&gt;
    &lt;input type=&quot;text&quot; id=&quot;title&quot; class=&quot;form-control&quot; formControlName=&quot;title&quot;&gt;
    &lt;span class=&quot;help-block&quot; *ngIf=&quot;formErrors.title&quot;&gt;{{ formErrors.title }}&lt;/span&gt;
    &lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;
```

**And my controller:**
```js
import {Component, OnInit} from &#39;@angular/core&#39;;
import {FormGroup, FormBuilder, Validators} from &#39;@angular/forms&#39;;
    
@Component({
  selector   : &#39;pastebin-root&#39;,
  templateUrl: &#39;./app.component.html&#39;,
  styleUrls  : [&#39;./app.component.css&#39;]
})
export class AppComponent implements OnInit {
  form: FormGroup;
  formErrors = {
    &#39;title&#39;: &#39;&#39;
  };
  validationMessages = {
    &#39;title&#39;: {
      &#39;required&#39;: &#39;Title is required.&#39;
    }
  };
    
  constructor(private fb: FormBuilder) {
  }
    
  ngOnInit(): void {
    this.buildForm();
  }
    
  onSubmit(form: any): void {
    // somehow touch all elements so onValueChanged will generate correct error messages

    this.onValueChanged();
    if (this.form.valid) {
      console.log(form);
    }
  }
    
  buildForm(): void {
    this.form = this.fb.group({
      &#39;title&#39;: [&#39;&#39;, Validators.required]
    });
    this.form.valueChanges
      .subscribe(data =&gt; this.onValueChanged(data));
  }
    
  onValueChanged(data?: any) {
    if (!this.form) {
      return;
    }

    const form = this.form;

    for (const field in this.formErrors) {
      if (!this.formErrors.hasOwnProperty(field)) {
        continue;
      }
    
      // clear previous error message (if any)
      this.formErrors[field] = &#39;&#39;;
      const control = form.get(field);
      if (control &amp;&amp; control.touched &amp;&amp; !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          if (!control.errors.hasOwnProperty(key)) {
            continue;
          }
          this.formErrors[field] += messages[key] + &#39; &#39;;
        }
      }
    }
  }
}
```

Reactive Forms - mark fields as touched

We have a component that has a dynamically built form. The code to add a control with validators might look like this:
   
```typescript
var c = new FormControl(&#39;&#39;, Validators.required);
```
But let&#39;s say that I want to add 2nd Validator **later**. How can we accomplish this? We cannot find any documentation on this online. I did find though in the form controls there is `setValidators`

```typescript
this.form.controls[&quot;firstName&quot;].setValidators 
```
but it is not clear how to add a new or custom validator. 
 

In Angular, how to add Validator to FormControl after control is created?

How can I add a FormControl to a FormGroup dynamically in Angular?

For example,
I would like to add a mandatory control which name is &quot;new&quot; and its default value is &#39;&#39;.

addControl to FormGroup dynamically in Angular

[FormGroup][1]:

&gt; A **FormGroup** aggregates the values of each child FormControl into one
&gt; object, with each control name as the key.

&lt;!-- language: lang-js --&gt;
    const form = new FormGroup({
      first: new FormControl(&#39;Nancy&#39;, Validators.minLength(2)),
      last: new FormControl(&#39;Drew&#39;)
    });

[FormArray][2]:

&gt; A **FormArray** aggregates the values of each child FormControl into an
&gt; array.

&lt;!-- language: lang-js --&gt;

    const arr = new FormArray([
      new FormControl(&#39;Nancy&#39;, Validators.minLength(2)),
      new FormControl(&#39;Drew&#39;)
    ]);

When should one be used over the other?

[1]: https://angular.io/api/forms/FormGroup
[2]: https://angular.io/api/forms/FormArray

When to use FormGroup vs. FormArray?

I have a form on my page and when I call `FormGroup.reset()` it sets the forms class to `ng-pristine ng-untouched` but `FormControl.hasError(...)` still returns truthy. What am I doing wrong here?

**Template**

    &lt;form [formGroup]=&quot;myForm&quot; (ngSubmit)=&quot;submitForm(myForm)&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput formControlName=&quot;email&quot; /&gt;
        &lt;mat-error *ngIf=&quot;email.hasError(&#39;required&#39;)&quot;&gt;
          Email is a required feild
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput type=&quot;password&quot; formControlName=&quot;password&quot; /&gt;
        &lt;mat-error *ngIf=&quot;password.hasError(&#39;required&#39;)&quot;&gt;
          Password is a required feild
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;button type=&quot;submit&quot;&gt;Login&lt;/button&gt;
    &lt;/form&gt;

**Component**

    export class MyComponent {
      private myForm: FormGroup;
      private email: FormControl = new FormContorl(&#39;&#39;, Validators.required);
      private password: FormControl = new FormControl(&#39;&#39;, Validators.required);
    
      constructor(
        private formBuilder: FormBuilder
      ) {
        this.myForm = formBuilder.group({
          email: this.email,
          password: this.password
        });
      }
    
      private submitForm(formData: any): void {
        this.myForm.reset();
      }
    }

**Plunker**

[https://embed.plnkr.co/Hlivn4/][1]


  [1]: https://embed.plnkr.co/Hlivn4/

Angular 5 FormGroup reset doesn&#39;t reset validators

Hi Everyone I&#39;m new to angular. Actually, I&#39;m trying to subscribe data from a service and that data, I&#39;m passing to form control of mine from (example, it&#39;s like an edit form).

&lt;!-- language: typescript --&gt;

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from &#39;@angular/forms&#39;;
    import { ActivatedRoute, Router } from &#39;@angular/router&#39;;
    import { QuestionService } from &#39;../shared/question.service&#39;;
    
    @Component({
      selector: &#39;app-update-que&#39;,
      templateUrl: &#39;./update-que.component.html&#39;,
      styleUrls: [&#39;./update-que.component.scss&#39;]
    })
    export class UpdateQueComponent implements OnInit {
    
      questionsTypes = [&#39;Text Type&#39;, &#39;Multiple choice&#39;, &#39;Single Select&#39;];
      selectedQuestionType: string = &quot;&quot;;
      question: any = {};

      constructor(private route: ActivatedRoute, private router: Router,
        private qService: QuestionService, private fb: FormBuilder) { 
    
      }
    
      ngOnInit() {
          this.getQuebyid();
      }
    
      getQuebyid(){
        this.route.params.subscribe(params =&gt; {
          this.qService.editQue([params[&#39;id&#39;]]).subscribe(res =&gt;{
            this.question = res;
          });
        });
      }
    
      editqueForm =  this.fb.group({
        user: [&#39;&#39;],
        questioning: [&#39;&#39;, Validators.required],
        questionType: [&#39;&#39;, Validators.required],
        options: new FormArray([])
      })
    
      setValue(){
        this.editqueForm.setValue({user: this.question.user, questioning: this.question.questioning})
      }
    
    }

if I use `[(ngModule)]` on my form field to set the value to my element it is working fine and showing a warning it&#39;ll be deprecated in angular 7 version.

&lt;!-- language: html --&gt;

    &lt;textarea formControlName=&quot;questioning&quot; [(ngModule)]=&quot;question.questioning&quot; cols=&quot;70&quot; rows=&quot;4&quot;&gt;&lt;/textarea&gt;

So, I set the values to my form control by doing below but the element is not showing those values.
 
&lt;!-- language: typescript --&gt;

    setValue(){
       this.editqueForm.setValue({user: this.question.user, questioning: this.question.questioning})
    }
can anyone tell me how to set values to mine reactive form. Please suggest me.


How to set value to form control in Reactive Forms in Angular

I have a form that displays a list of `&lt;input type=&quot;text&quot;&gt;` elements. They all share a common save button which is disabled until the form becomes dirty. Then, once the user clicks the save button, the data will be submitted to the server. If the server successfully saved the data, I want to reset the form to a pristine state, but I want to keep all of the data in the form so the user can edit the data further if they so choose.

After searching, I have found the `NgForm.reset()` method. While this does set the form to pristine, it unfortunately also clears out the form. The reset method does seem to have a value parameter, but I can&#39;t seem to find out what it does. Nevertheless, I don&#39;t want the data cleared out.

I have also tried `myForm.pristine = true` as well, but this causes a reload of the page for some reason.

[Here is a plunkr demonstrating the problem][1].


  [1]: https://plnkr.co/edit/wf9Ggiue5Xc8vNRXmZ6O?p=preview

Set Form to Pristine without clearing data

    this.formGroup = this.formBuilder.group({
        images: this.fb.array([])
    });

I add new element in this way:
`this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id)));`

    get images(): FormArray {
        return &lt;FormArray&gt;this.formGroup.controls.images;
    }

My classes:

    export class ImageCreateForm {
        id: number;
        constructor(id: number) {
            this.id = id;
        }
    }
    
    export class ImageResponse {
        id: number;
        url: string;
    }

When I added images, then my `{{ formGroup.value | json }}` is:

    &quot;images&quot;: [
       {
       	&quot;id&quot;: 501
       },
       {
       	&quot;id&quot;: 502
       },
       {
       	&quot;id&quot;: 503
       }
    ]

I want to remove images (for example only image with `id=502`) from `formGroup` before when I send my form POST request. Is it possible?
I tried use `reset` method, but this remove all elements:
`this.images.reset({&quot;id&quot;:image.id});`. Where `image` it is a `ImageResponse` object.

Result: `{&quot;images&quot;: [ null, null, null ]}`, but I want:

    &quot;images&quot;: [
       {
       	&quot;id&quot;: 501
       },
       {
       	&quot;id&quot;: 503
       }
    ]

TypeScript. FormGroup FormArray - remove only one element object by value. Angular 2 4

As Angular [documentation][1] says we can use `formControlName` in our forms:

    &lt;h2&gt;Hero Detail&lt;/h2&gt;
    &lt;h3&gt;&lt;i&gt;FormControl in a FormGroup&lt;/i&gt;&lt;/h3&gt;
    &lt;form [formGroup]=&quot;heroForm&quot; novalidate&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;center-block&quot;&gt;Name:
                &lt;input class=&quot;form-control&quot; formControlName=&quot;name&quot;&gt;
            &lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;

As they say...

&gt; Without a parent FormGroup, [formControl]=&quot;name&quot; worked earlier because that directive can stand alone, that is, it works without being in a FormGroup. With a parent FormGroup, the name input needs the syntax formControlName=name in order to be associated with the correct FormControl in the class. This syntax tells Angular to look for the parent FormGroup, in this case heroForm, and then inside that group to look for a FormControl called name.

Anyway some months ago I asked [this][2] to figure out what is the difference between `formControlName` and `[formControl]`.

Now my question is: what about use `formControlName` with nested FormGroups?

For example, if I have the following form structure:

    this.myForm = fb.group({
        &#39;fullname&#39;: [&#39;&#39;, Validators.required],
        &#39;gender&#39;: [],
		&#39;address&#39;: fb.group({
            &#39;street&#39;: [&#39;&#39;],
            &#39;houseNumber&#39;: [&#39;&#39;],
            &#39;postalCode&#39;: [&#39;&#39;]
        })
    });

What is the right way to bind &quot;street&quot; (or &quot;houseNumber&quot; or &quot;postalCode&quot;) to related HTML elements using `formControlName`?

  [1]: https://angular.io/docs/ts/latest/guide/reactive-forms.html
  [2]: https://stackoverflow.com/questions/40171914/what-is-the-difference-between-formcontrolname-and-formcontrol

How to use formControlName and deal with nested formGroup?

I want a button to be disabled until a checkbox has been checked using a FormBuilder for Angular. I don&#39;t want to explicitly check the value of the checkbox and would prefer to use a validator so that I can simply check `form.valid`.

In both validation cases below the checkbox is 

&lt;!-- language: lang-typescript --&gt;

    interface ValidationResult {
      [key:string]:boolean;
    }
    
    export class CheckboxValidator {
      static checked(control:Control) {
        return { &quot;checked&quot;: control.value };
      }
    }
    
    @Component({
      selector: &#39;my-form&#39;,
      directives: [FORM_DIRECTIVES],
      template: `  &lt;form [ngFormModel]=&quot;form&quot; (ngSubmit)=&quot;onSubmit(form.value)&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;cb&quot; ngControl=&quot;cb&quot;&gt;
        &lt;button type=&quot;submit&quot; [disabled]=&quot;!form.valid&quot;&gt;
        &lt;/form&gt;`
    })
    
    export class SomeForm {
      regForm: ControlGroup;
    
      constructor(fb: FormBuilder) {
        this.form = fb.group({
          cb: [ CheckboxValidator.checked ]
          //cb: [ false, Validators.required ] &lt;-- I have also tried this
        });
      }
    
      onSubmit(value: any) {
        console.log(&#39;Submitted: &#39;, this.form);
      }
    }


Requiring a checkbox to be checked

I am trying to figure out how to use a pipe within a reactive form so that the input is forced into a currency format.  I have already created my own pipe for this which I have tested in other areas of the code so I know it works as a simple pipe.  My pipe name is &#39;udpCurrency&#39;

The closest answer I could find on stack overflow was this one: https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular2-view However this is not working in my case and I suspect it has something to do with the fact that my form is reactive

Here is all the relevant code:

**The Template**

    &lt;form [formGroup]=&quot;myForm&quot; #f=&quot;ngForm&quot;&gt;
      &lt;input class=&quot;form-control col-md-6&quot; 
        formControlName=&quot;amount&quot; 
        [ngModel]=&quot;f.value.amount | udpCurrency&quot; 
        (ngModelChange)=&quot;f.value.amount=$event&quot; 
        placeholder=&quot;Amount&quot;&gt;
    &lt;/form&gt;

**The component**

    import { Component, OnInit, HostListener } from &#39;@angular/core&#39;;
    import { FormBuilder, FormGroup, Validators } from &#39;@angular/forms&#39;;
    
    export class MyComponent implements OnInit {
      myForm: FormGroup;
    
      constructor(
        private builder: FormBuilder
      ) {
        this.myForm = builder.group({
          amount: [&#39;&#39;, Validators.required]
        });
      }    
    }

**The error:**

    ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: &#39;undefined: &#39;. Current value: &#39;undefined: undefined&#39;




How to use pipes in Angular 5 reactive form input

I have 2 radio buttons, I&#39;m using reactive forms and I have added the form controls within my component. The issue I am facing is that the name attribute has to be the same as the formControlName. When I set the name attribute as the same, I can only select 1 radio button -- can never unselect and select the other one. Only allows me to select the same one.

    this.genderControl = new FormControl(&quot;&quot;, Validators.required);
and then added to my Form Group

    genderControl: this.genderControl,

My HTML:

    &lt;div class=&quot;radio-inline&quot;&gt;
      &lt;input id=&quot;gender&quot; type=&quot;radio&quot; name=&quot;genderControl&quot; formControlName=&quot;genderControl&quot; /&gt;
      &lt;label class=&quot;radio-label&quot;&gt; Male&lt;/label&gt;
      &lt;input id=&quot;gender&quot; type=&quot;radio&quot; name=&quot;genderControl&quot; formControlName=&quot;genderControl&quot; /&gt;
      &lt;label class=&quot;radio-label&quot;&gt;Female&lt;/label&gt;
    &lt;/div&gt;


Form Group

        this.personalInfo = new FormGroup({
      searchControl: this.searchControl,
      titleControl: this.titleControl,
      firstNameControl: this.firstNameControl,
      middleNameControl: this.middleNameControl,
      lastNameControl: this.lastNameControl,
      birthdayControl: this.birthdayControl,
      genderControl: this.genderControl,
      phoneControl: this.phoneControl,
      taxCanadaControl: this.taxCanadaControl,
      provinceControl: this.provinceControl,
      countryControl: this.countryControl,
      taxCountryControl: this.taxCountryControl,

      creditControl: this.creditControl
    });



Angular 5 Reactive Forms - Radio Button Group

How to make a formControl in angular readonly

I know i can do it in html like 

    &lt;input type=&quot;text&quot; formControlName=&quot;xyz&quot; readonly /&gt;

how to do it from JS Code and not html i.e in a model driven way

How to make a formControl readonly

In an Angular reactive form. How to reset only the **state** of form after successful submit?

Here is the process:

 - Create the form and `setValue` from service result
 - Modify values and submit the form
 - If form is properly submitted to service, then reset and keep values

**How to keep values as modified and reset the form to its pristine state.**

A form.reset() simply empty the form. But if I don&#39;t call it, the state is not reset and for example my validations depending on form state classes (pristine, dirty, valid etc.) are still there. 

Angular Reactive forms : how to reset form state and keep values after submit

I recently upgraded the angular version to 6-rc. I got following warning 

&gt; It looks like you&#39;re using ngModel on the same form field as
&gt; formControlName. Support for using the ngModel input property and
&gt; ngModelChange event with reactive form directives has been deprecated
&gt; in Angular v6 and will be removed in Angular v7
&gt; 
&gt; For more information on this, see our API docs here:
&gt;     https://angular.io/api/forms/FormControlName#use-with-ngmodel

What does it say exactly? the link does not have any fragment for `#use-with-ngmodel`

I guess I need to remove `ngModel` and use formGroup as my data binding object. 

angular 6 warning for using formControlName and ngModel

Is there any preferred way when selecting validation using

 - `myForm.controls[&#39;name&#39;].valid`
 - `myForm.get(&#39;name&#39;).valid`

as both seems to be only syntactically different but achieving the same goal.

    &lt;label&gt;Name
      &lt;input type=&quot;text&quot; formControlName=&quot;name&quot;&gt;
    &lt;/label&gt;
    &lt;div class=&quot;alert&quot; *ngIf=&quot;!myForm.controls[&#39;name&#39;].valid &amp;&amp; myForm.controls[&#39;name&#39;].touched&quot;&gt;
      {{ titleAlert }}
    &lt;/div&gt;

Same as

	&lt;div class=&quot;alert&quot; *ngIf=&quot;!myForm.get(&#39;name&#39;).valid &amp;&amp; myForm.get(&#39;name&#39;).touched&quot;&gt;
      {{ titleAlert }}
    &lt;/div&gt;

From what I checked in the code, `get` has this code:

    AbstractControl.prototype.get = function (path) { return _find(this, path, &#39;.&#39;); };

I have just started Angular, so an expert opinion would be appreciated.

All Angular Reactive-Forms Solutions on Gang of Coders

Total of 19 Angular Reactive-Forms Solutions