angular2-forms

来源： https://stackoverflow.com/questions/41549426/use-of-ngmodel-within-formgroup

问题 I would like to pass the parent component's FormGroup to its child for the purpose of displaying an error-message using the child Given the following parent parent.cmponent.ts import { Component, OnInit } from '@angular/core' import { REACTIVE_FORM_DIRECTIVES, AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' @Component( { moduleId: module.id, selector: 'parent-cmp', templateUrl: 'language.component.html', styleUrls: ['language.component.css'],

问题 I have forms that uses the template-driven blueprint, so something like this: <form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)"> <input #name="ngModel" [(ngModel)]="name"> <button type="submit">Submit form</button> </form> Now, how can I prevent ENTER from submitting the form? It interferes with custom ENTER behaviour inside of the form and also if you accidentally press enter in an input, which is unwanted. I've looked around and found some old Angular 1 answers and also

问题 Im building basic Todo App in angular2 when I click add button to send data from parent to child using input I get No provider for string! (child->string), and no data displayed only button at the child class is shown, what does it mean here is parent component: @Component({ selector : 'parent-component', directives : [child], template : ` <h1 class= "text-center">ToDo App</h1> <div class = "form-group"> <lable>Task</lable> <input type = "text" class = "form-control" #task> <lable>Detail<

问题 Im building basic Todo App in angular2 when I click add button to send data from parent to child using input I get No provider for string! (child->string), and no data displayed only button at the child class is shown, what does it mean here is parent component: @Component({ selector : 'parent-component', directives : [child], template : ` <h1 class= "text-center">ToDo App</h1> <div class = "form-group"> <lable>Task</lable> <input type = "text" class = "form-control" #task> <lable>Detail<

问题 I am trying to use trix editor for my angular app. However, I am not getting any resources/npm packages to install trix editor in an angular 2 app. Can you help me with the resources/steps to do so? 回答1: I also can not find any for angular2+. Just set it up. angular.json add below "styles": [ "node_modules/trix/dist/trix.css" ], "scripts": [ "node_modules/trix/dist/trix.js" ] attach editor at HTML you want to put it. angular using as selector and trix using as target location of editor. It

问题 Angular - Submit a form programmatically. I have a form group on the HTML and I want the component to submit the form's action with an email field in a post method. Instead of using a normal submit button. Below's testMethod gets called from another button. In this method, I want to post the testForm . It has to be posted old school way as it needs an action. This is my HTML: <form [formGroup]="testGroup" [action]='actionLink' method='POST' #testForm> <input name='Email' type='hidden' [value]

问题 I have the following data structure in my firebase table: Inside my Angular2 application I retrieve the entries and and display them in a select list as shown here: <select class="form-control" id="lookingFor" formControlName="gender" > <option value="" selected>Please Select</option> <option *ngFor="let status of genderValue" [value]="status.id">{{ status.description}}</option> </select> As you can see my first item in the list is a please select, this is selected by default before they have

问题 I just populated users from userservice and rendered in textbox control to table using *ngFor . User can change the value from table textbox. I want to validate on each row user textbox control. Here is my code.. Please provide a solution for my problem. Interface export interface IUser { userId: string; FirstName: string; status: number } Enum export enum UserStatus { Active = 0, InActive = 1, Resigned = 2 } Component export class UserComponent implements OnInit { users: IUser[];

问题 I have an input field with optional value (not required). When I interact with it, I get classes ng-dirty , ng-valid , ng-touched <input type="text" formControlName="url" [class.has-value]="quickSetupForm.controls.url.value !== ''" placeholder="www.example.com" id="url"> input.ng-valid.ng-dirty.has-value border-bottom 2px solid green What's the best way to do has-value check for all formControls? Or is there some other way to do this? I don't want input.ng-valid.ng-dirty selector to affect