angular-reactive-forms

I am using angular5 reactivemodule to show a form in my application. I had also used required validator which will subsequently make the field in red color and show an error msg to the user. It is working as expected but when I reset the form using this.form.reset() the form shows me a validation error that the specific field is required. I also used form.markAsPristine() or form.markAsUntouched() to make it work but the problem persist after applying multiple combination of possible pairs. example.html <form [formGroup]="checkForm" (ngSubmit)="submitForm()"> <mat-form-field> <input matInput

I have a angular 2 form wherein I have to make a field required on some condition like: description: ['', Validators.required] This description field will be required only on some type of a condition like: if(true){descReq = true}; How can I achieve this, please suggest. Thanks in advance! You can add or remove a validator based on the the value of another control on the form: testForm: FormGroup; constructor(private formBuilder: FormBuilder) { this.testForm = this.formBuilder.group({ condition: [''], description: [''] }); this.testForm.controls['condition'].valueChanges.subscribe(result => {

I'm building a form in Angular with Reactive Forms. I'm using the FormBuilder to make a group of fields. For textboxes this works extremely well. But I can't find a formControl for radio buttons. How does this work? Should I use <input formControlName="gender" type="radio"> just like I use with text input's? Should I do <input formControlName="gender" type="radio"> just like I do with text input's? Yes. How does this work? Form control directives use a ControlValueAccessor directive to communicate with the native element. There are different types of ControlValueAccessors for each of the

I have a very complex and large data and I have to build a Reactive form around it in a component. I've developed the form. But when I type something in one of the input fields to edit the populated data, it responds extremely slowly in updating the value of that field. I tried using updateOn:'blur' and 'submit' but without any luck. My question is, what is best practice to handle the form with large data? Update : This is my StackBlitz . Note : I've created a very minimal version of my actual implementation and I have performance issues in the Reactive Form. So after about a day of playing

I recently upgraded the angular version to 6-rc. I got following warning It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7 For more information on this, see our API docs here: 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. If

I need help in making the rows enable only when the checkbox is check. The default rows should be disabled but when the checkbox is only check, that row will be enabled. Here's the link to my code LINK CODES patchValues() { let rows = this.myForm.get('rows') as FormArray; this.orders.forEach(material => { material.materials.forEach(x => { rows.push(this.fb.group({ checkbox_value: [null], material_id: new FormControl({value: x.id, disabled: true}, Validators.required), material_name: x.name, quantity: [null, Validators.required] })) }) }) } Have a look at the Demo & Src Stack Blitz, Fork

Is there any preferred way when selecting validation using myForm.controls['name'].valid myForm.get('name').valid as both seems to be only syntactically different but achieving the same goal. <label>Name <input type="text" formControlName="name"> </label> <div class="alert" *ngIf="!myForm.controls['name'].valid && myForm.controls['name'].touched"> {{ titleAlert }} </div> Same as <div class="alert" *ngIf="!myForm.get('name').valid && myForm.get('name').touched"> {{ titleAlert }} </div> From what I checked in the code, get has this code: AbstractControl.prototype.get = function (path) { return