angular-reactive-forms | 易学教程

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

阅读更多关于 In Angular, how to add Validator to FormControl after control is created?

We have a component that has a dynamically built form. The code to add a control with validators might look like this: var c = new FormControl('', Validators.required); But let'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 this.form.controls["firstName"].setValidators but it is not clear how to add a new or custom validator. You simply pass the FormControl an array of validators. Here's an example showing how you can add validators to an existing

Angular2 Reactive Forms formControl for radio buttons

阅读更多关于 Angular2 Reactive Forms formControl for radio buttons

问题 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? 回答1: 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

How to use reactive forms in a dynamic component

阅读更多关于 How to use reactive forms in a dynamic component

Background I receive client generated data from the server that contains HTML that I then use to create a dynamic component that gets injected and displayed in our client. The HTML I receive can contain one or many inputs that I need to bind to via Angular Reactive Forms . Attempt 1: I attempted to tackle this requirement by simply using the [innerHTML] property and creating dynamic Reactive Forms to bind to the inputs. However, that method fails due to technical limitations of using the innerHTML property. Once the HTML is rendered in the browser all properties are forced to lowercase text so

Angular 5 Reactive Forms - Radio Button Group

阅读更多关于 Angular 5 Reactive Forms - Radio Button Group

问题 I have 2 radio buttons, I'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("", Validators.required); and then added to my Form Group genderControl: this.genderControl, My HTML

Angular 7 ,Reactive Form slow response when has large data

阅读更多关于 Angular 7 ,Reactive Form slow response when has large data

问题 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

Enable When Checkbox is Check in Reactive Forms

阅读更多关于 Enable When Checkbox is Check in Reactive Forms

问题 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,

angular 5 template forms detect change of form validity status

阅读更多关于 angular 5 template forms detect change of form validity status

问题 are reactive forms the way to go in order to have a component that can listen for changes in the validity status of the form it contains and execute some compoment's methods? It is easy to disable the submit button in the template using templateRef like [disabled]="#myForm.invalid" , but this does not involve the component's logic. Looking at template forms' doc I did not find a way 回答1: If you want to get only the status and not the value you can use statusChanges : export class Component {

Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular 7

阅读更多关于 Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular 7

In the other examples at StackOverflow there are many questions about using FormGroups in FormArrays. But my question is the opposite. FormArrays have a push method, that makes many things possible. FormGroups have indeed an addControl method for adding simple FormControls. Afaik FormGroups do not have addFormArray or addFormGroup method. Therefore I need your help. Following situation: this.myForm = this.fb.group({ id: this.fb.control([this.book.id]), // or short form `id: [this.book.id],` }); Adding a simple control at a later point in time is easy: this.myForm.addControl('isbn', this.fb

formGroup.get vs formGroup.controls in reactive form - Angular

阅读更多关于 formGroup.get vs formGroup.controls in reactive form - Angular

问题 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

How to disable a input in angular2

阅读更多关于 How to disable a input in angular2

In ts is_edit = true to disable... <input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2"> I just simply want to disable a input based on true or false . I tried following: [disabled]="is_edit=='false' ? true : null" [disabled]="is_edit=='true'" [disabled]="is_edit" fedtuck Try using attr.disabled , instead of disabled <input [attr.disabled]="disabled ? '' : null"/> I think I figured out the problem, this input field is part of a reactive form (?), since you have included formControlName . This