You can change the assignment of the variable to a setter method so that you’d have: set isDisabled(value: boolean) { this._isDisabled = value; if(value) { this.form.controls[‘name’].disable(); } else { this.form.controls[‘name’].enable(); } }
import FormsModule in addition to ReactiveFormsModule
Just add type=”button” to it. A button without any defined type in a form acts like a submit button for the form.
Its ok to use valueor ngValue. The only difference between two is that value is always string, where in ngValue you can pass object
You should specify formGroupName for nested controls <div class=”panel panel-default” formGroupName=”address”> <== add this <div class=”panel-heading”>Contact Info</div> Plunker Example
This solution was born from the discussion in the Angular repository. Please, make sure to read it or even better to participate if you are interested in this problem. I’ve studied the code of FormControlName directive and it’s inspired me to write the following solution: @Component({ selector: ‘my-custom-form-component’, templateUrl: ‘./custom-form-component.html’, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: … Read more
I would use a reactive form which works quite nicely, and as to your comment: Is there any other simple example for this one? Maybe the same example without loops I can give you an example. All you need to do, is to nest a FormGroup and pass that on to the child. Let’s say … Read more
If you are using Angular 12.2 or higher, you can use the AbstractControl methods addValidators, removeValidators, and hasValidator, as per the docs: if(this.businessFormGroup.get(‘businessType’).value !== ‘Other’){ this.businessFormGroup.get(‘description’).addValidators(Validators.required); } else { this.businessFormGroup.get(‘description’).clearValidators(); } For older versions, Angular forms have a built in function setValidators() that enables programmatic assignment of Validators. However, this will overwrite your validators. For … Read more
There might be other reasons this occurs but in my case I had a button that was interpreted by the browser as a submit button and hence the form was submitted when the button was clicked causing the error. Adding type=”button” fixed the issue. Full element: <button type=”button” (click)=”submitForm()”>
This question could be solved with a combination of these two answers: https://stackoverflow.com/a/43493648/6294072 and https://stackoverflow.com/a/47670892/6294072 So first of all, you would need a custom validator for checking the passwords, that could look like this: checkPasswords: ValidatorFn = (group: AbstractControl): ValidationErrors | null => { let pass = group.get(‘password’).value; let confirmPass = group.get(‘confirmPassword’).value return pass === … Read more