angular-forms

How can i add several columns if i add the "click here to add transportation field" like i want to add driver, contact number etc.... Once you click the modal, it will show you some options on what field to add. Please check the code link that I've made. here's also my codes below. Please check also the image here CHECK THIS LINK https://stackblitz.com/edit/dynamic-columns-reactive-forms-hj5nur?file=app/app.component.ts openModal(template: TemplateRef < any > ) { this.modalRef = this.modalService.show(template); } initGroup() { let rows = this.addForm.get('rows') as FormArray; rows.push(this

I am working on Angular checkbox and need to read value either given ng-true-value / ng-false-value or boolean value not sure what I am missing from code. I am reading event but not sure which value to read?? template <div> <input type="checkbox" name="questionAnswerState" ng-model="check" ng-true-value = "answerProvided" ng-false-value="questionAnswerNotProvided" (change)="isAnswerProvided($event, check)" /> Answer Provided? component isAnswerProvided(event: any, check:any) { console.log("question answer not provided responseId:: ",this.responseId, " questionId::",this.questionId, " check::",

I am using a directive on an <input> -element and get a reference to its controls like this: @ContentChild(NgControl) private readonly _inputNgControl: NgControl; But when I listen to model-changes like so: ngAfterContentInit(): void { this._inputNgControl.control.valueChanges .distinctUntilChanged() .subscribe(value => { // ... }); } it appears that this._inputNgControl.control refers not to the input that the directive is sitting on, but to ALL inputs in my parent component (which contains multiple <input> -elements with the same directive) because I get changes from all of those inputs in

EDIT: I've discovered what is causing the problem; I'm now looking for a solution as to how to cater for it. NOTE : This issue is happening in dev mode (i.e. not prod, and not using aot) I'm using the "Update" solution from here: https://stackoverflow.com/a/46324043/3164070 To solve an issue with an input in a child component that was not updating the valid flag on the form. It works in a fairly simple test project, however when moving it to our real project, it throws this error: core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for NgForm! Error: No provider for NgForm!

I'm trying to integrate an Invisible reCAPTCHA with my Angular 4 form. In the TS part of the component I have a function like this: onSubmit(token: string) { alert(token); } And my HTML looks like this (only the relevant parts shown): <form (ngSubmit)="onSubmit()" #myForm="ngForm"> <button type="submit" class="btn g-recaptcha" data-sitekey="mykey" data-callback="onSubmit">Submit</button> </form> When clicking on that button I get either an alert saying the token is undefined, or I get an error message like this: "Cannot contact reCAPTCHA. Check your connection and try again." Not really

I'm using Angular 4.4.3 reactive forms to implement custom validation for a group of controls in a form. The method AbstractControl.setErrors , according to docs updates the errors property of the AbstractControl, upon which it's invoked, updates the status of its parent, but not the parents errors property. I wanted to set the errors property on a FormGroup instance, so I use the setErrors inherited by the FormGroup. However, it does not update errors as expected. Following is my sample code: Trying it on FormControl instances, does update their errors as well as their parents' validity

I am learning Angular 5 with TypeScript. I am completely new to it. I am now trying to construct a form and validating it. But it is not working properly. Please see my code below. This is my component. @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'], animations: [routerTransition()] }) export class LoginComponent implements OnInit { loginForm: FormGroup; errors = []; constructor(private fb: FormBuilder, public router: Router, private globals: GlobalsService, private http: Http) { } ngOnInit() { this.loginForm = new FormGroup({