The Solution Working StackBlitz with solution The solution is to create the Reactive Form in the parent component. Then use Angulars dependency injection and inject the parent component into the Dynamic Component. By injecting the parent component into the dynamic component you will have access to all of the parents components public properties including the … Read more
import {AbstractControl, FormBuilder, FormGroup, Validators} from set your password input into the group and no need to use “ngModel”. <div class=”form-group row” formGroupName=”passwords”> <div class=”form-group”> <label for=”password” class=”control-label”>Contraseña:</label> <input type=”password” class=”form-control” formControlName=”password” title=”Please enter your password”> <p class=”help-block” *ngIf=”signUpForm.get(‘password’).hasError(‘required’) && signUpForm.get(‘password’).touched”>Debe ingresar una contraseña</p> </div> <div class=”form-group”> <label for=”confirmedPassword” class=”control-label”>Confirmar Contraseña:</label> <input type=”password” class=”form-control” formControlName=”confirmedPassword” … Read more
Now you can find the documentation here: https://angular.io/api/forms/FormControlName#use-with-ngmodel-is-deprecated So you have 3 options: use Reactive forms use Template driven forms silence warning (not recommended) <!– language: lang-ts –> imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: ‘never’}); ]
If you are using Reactive Forms you can assign it dynamically like in the example code below (email field) this.registerForm = this.formBuilder.group({ first_name: [”, Validators.required], last_name: [”, Validators.required], email: new FormControl({value: null, disabled: true}, Validators.required), password: [”, Validators.compose([Validators.required, Validators.email])], confirm_password: [”, Validators.required], }); If you want to get all the values including disabled controls you … Read more
This is what can happen when you mix template driven form and reactive form. You have two bindings fighting each other. Choose either template driven or reactive form. If you want to go the reactive route, you can use [value] for your pipe… Note, this pipe is rather only for showing the desired output in … Read more
I tried your code, you didn’t assign/bind a value to your formControlName. In HTML file: <form [formGroup]=”form”> <label> <input type=”radio” value=”Male” formControlName=”gender”> <span>male</span> </label> <label> <input type=”radio” value=”Female” formControlName=”gender”> <span>female</span> </label> </form> In the TS file: form: FormGroup; constructor(fb: FormBuilder) { this.name=”Angular2″ this.form = fb.group({ gender: [”, Validators.required] }); } Make sure you use Reactive … Read more
addControl is what you need. Please note the second parameters must be a FormControl instance like so: this.testForm.addControl(‘new’, new FormControl(”, Validators.required)); You can also add the validators dynamically if you want with the setValidators method. Calling this overwrites any existing sync validators.
FormGroup addControl method accepts AbstractControl as parameter which can be either a FormControl or a FormArray or another FormGroup as they all extend AbstractControl. class FormGroup extends AbstractControl {} class FormControl extends AbstractControl {} class FormArray extends AbstractControl {} FormBuilder can help you building such controls with array() and group() methods: this.myForm = this.fb.group({ id: … Read more
You simply pass the FormControl an array of validators. Here’s an example showing how you can add validators to an existing FormControl: this.form.controls[“firstName”].setValidators([Validators.minLength(1), Validators.maxLength(30)]); Note, this will reset any existing validators you added when you created the FormControl. Angular 12 update Since Angular 12, if you want to add new validators to the form without … Read more
The min, max and required validators can be kept as is. If you want to validate one control based on the value of another, you need to lift the validation to the parent control. import { Component } from ‘@angular/core’; import { ValidatorFn, FormBuilder, FormGroup, Validators } from ‘@angular/forms’; const portStartEnd: ValidatorFn = (fg: FormGroup) … Read more