angular2-forms

问题 I have a Component, containing a Template Driven form. What I really want to do is to add a code to routerCanDeactivate method to check if the form is pristine and if not, to warn the user before continuing with navigation. I know that Angular takes a Template Driven form and builds a ControlGroup. In the template, I can get to it like so: <form #hf="ngForm" ...> Is there a way to reference it from within a component? If this is not possible, is there another way to check if the form is dirty

问题 According to the API documentation the proper way to change nested values is to use method patchValue myForm.patchValue({'key': {'subKey': 'newValue'}}); But how to change values in nested arrays like list of cars in this example below. How to get first item of list array an change model to Fiesta ? Plunker myForm.patchValue({'list': 0: {'model': 'Fiesta'}); is not working. @Component({ moduleId: __moduleName, selector: 'my-app', template: `<div><pre>{{ myForm.value | json }}</pre></div>` })

问题 I have a form like below: createForm() { this.procedimentoForm = this.formBuilder.group({ nome: ['', Validators.required], descricao: ['', Validators.required], conteudo: ['', Validators.required], solucao: ['', Validators.required], mesa: ['', Validators.required] }); } The template: <form [formGroup]="procedimentoForm" class="ui form"> {{procedimentoForm.value.conteudo}} <div class="field"> <label>Descrição</label> <input type="text" placeholder="Descrição" formControlName="descricao"> <

问题 I tried to Iterate formArray several times, This is plunker link for this case https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview i want out put like this plunk https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview This is my scenario [ { "id": 1, "legend": "businessModule", "group": [ { "id": 1, "permission": { "controleType": "ff", "id": 2, "key": "create Business" }, "roles": [ { "id": 1, "name": "self" }, { "id": 2, "name": "other" } ] }, { "id": 1, "permission": { "controleType": "ff",

问题 I am using angular 2 forms in my application and i have created the forms based on given link. https://angular.io/docs/ts/latest/guide/forms.html In this for validation and to use forms APIs, i have set the ngModel values like #name="id" #id="ngModel" and which throws script error. But its resolved if i set #id="ngModel" as #id="ngForm" . But for my case i have to set my model value to ngModel . Below is my html page. <form (ngSubmit)="onSubmit()" #myForm="ngForm"> <div class="form-group">

问题 I have implemented FormGroup in angular2 project to render form and i have used formArray for getting nested array data form.component.html <div class="col-md-12" formArrayName="social_profiles"> <div *ngFor="let social of resumeForm.controls.social_profiles.controls; let i=index" class="panel panel-default m-t-10"> <div class="panel-heading" style="min-height: 30px;"> <span class="glyphicon glyphicon-remove pull-right" *ngIf="resumeForm.controls.social_profiles.controls.length > 1" (click)=

问题 These docs state the following: If emitEvent is true, this change will cause a valueChanges event on the FormControl to be emitted. This defaults to true (as it falls through to updateValueAndValidity). What is this updateValueAndValidity ? 回答1: You can subscribe to value changes of a control or the whole form. updateValueAndValidity allows you to modify the value of one or more form controls and the flag allows you to specify if you want this to emit the value to valueChanges subscribers.

问题 Is there a way to make a two way binding input component, that can also have a validation inside the component? What I'm trying to achieve is to have a components that I could line up in my forms as follows: <form #f="ngForm"> <my-form-input [(inputModel)]="name" [inputField]="myFormInputName"></my-form-input> <my-form-input [(inputModel)]="name2" [inputField]="myFormInputName2"></my-form-input> ... <my-form-input [(inputModel)]="lastItem" [inputField]="lastItemName"></my-form-input> </form>

问题 I am working with a project using Material Component in Angular 5. I did update my Visual code but I don't know what happened. I am facing an issue "Type 'ElementRef' is not generic." I have been stuck on this issue since morning. Error in this line _inputElement: ElementRef<HTMLInputElement>; constructor(toggleGroup: MatButtonToggleGroup, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLInputElement>, _focusMonitor: FocusMonitor); 回答1: I think the problem could be if your

问题 Using Angular 2, two-way binding is easy in template-driven forms - you just use the banana box syntax. How would you replicate this behavior in a model-driven form? For example, here is a standard reactive form. Let's pretend it's much more complicated than it looks, with lots and lots of various inputs and business logic, and therefore more appropriate for a model-driven approach than a template-driven approach. export class ExampleModel { public name: string; // ... lots of other inputs }