angular4-forms | 易学教程

Set Value Not Less Than 0 In FormArray Reactive Forms

阅读更多关于 Set Value Not Less Than 0 In FormArray Reactive Forms

问题 I have successfully implemented the value in the input field to not less than 1 in the "quantityControl" formControlName. However my problem is when on the formArray. How can i set that to not than less than 0 or should not be a negative number? Here's the code below and the link to my stackblitz CODE LINK this.inquiryForm.get('quantityControl').valueChanges.pipe( filter(quantity => quantity < 1) ).subscribe(value => { console.log(value); this.inquiryForm.get('quantityControl').setValue(1); }

Angular binding object with array from component to view with ngModels

阅读更多关于 Angular binding object with array from component to view with ngModels

问题 I tried to bind my model on my view, but I have a problem when I submit my form : I don't have an array, but many property. component : export class QuizFormAddQuestionComponent implements OnInit { public question: Question; constructor() { this.question = new Question(); } ngOnInit() { this.question.setModel({ question: 'test' }); this.question.setAnswers(3); } createQuestion(form) { console.log(form.value); } } my template : <hello name="{{ name }}"></hello> <div class="row"> <div class=

populate values in Form control from nested Form Array from JSON data

阅读更多关于 populate values in Form control from nested Form Array from JSON data

问题 FormArrayThe formObj has array of componentDetails Object which in turn has a nested array of component array. export class FormViewComponent implements OnInit { public callbackForm: FormGroup; formObj = { "componentDetails": [{ "component": [{ "value": "Choice 1" }, { "value": "Choice 2" }], "cpv": "", "label": "Description of Problem", "type": "radio", "mandatory": true }] }; loadObservableForm() { this.formService.getData(this.id) .subscribe( (formObj) => { this.formObj = formObj; this

setValidators in custom control without from reference in Angular

阅读更多关于 setValidators in custom control without from reference in Angular

问题 i have created a custom input control. I don't want to create any custom validation. I want to use default required, minLength, maxLength etc.I know i can do like this this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]); but i can't send form reference from parent component. How can i use setValidator inside textbox component. // input-box.component.ts import { Component, Input, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR,

Angular 5 - form validation e-mail

阅读更多关于 Angular 5 - form validation e-mail

问题 i want to solve this problem: Angular 5 - template driven form An input-field has type email. Example: <input type="email" [(ngModel)]="model.email" #email="ngModel" email /> I want to validate this field. But it should not be a required field. The validation should only start, if it isn't empty. If the field is empty, everthing is fine. Otherwise an error message should be displayed until the e-mail adress is correct. This is not realy working: *ngIf="email.untouched && email.invalid" So,

Angular: Error to POST HTML form (Not ajax) via component after sending 1st Ajax hit? Error:Form submission canceled because the form is not connected

阅读更多关于 Angular: Error to POST HTML form (Not ajax) via component after sending 1st Ajax hit? Error:Form submission canceled because the form is not connected

问题 I want to submit form to external site by POSTing the input fields in old school way(non Ajax) on paypal. code for answer worked for me. https://stackoverflow.com/a/49446910/3326275 . However what I am stuck with is that: I want to hit 1st ajax on My server. Then I have to post the whole form in old way on paypal on success of 1st ajax. I used following code in HTML(template) <form (submit)="onSubmit($event)" method="POST" [formGroup]="form" *ngIf='form' action="https://www.sandbox.paypal.com

Dynamic Columns Reactive Forms in Angular

阅读更多关于 Dynamic Columns Reactive Forms in Angular

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

angular 4 own form element component

阅读更多关于 angular 4 own form element component

问题 I am beginner in angular and I may need a little help with this thing. First of all I will just show how could it work then I will write about how I want it to work. This is the regular way when you work with ngModel: <form> <input name="name" placeholder="name" [(ngModel)]="model.name" value="" /> <select name="select" [(ngModel)]="model.select"> <option value="1">..</option> ... </select> <input type="button" value=" click me" /> </form> This is good enough if you don't want an own

Dynamic Columns Reactive Forms in Angular

阅读更多关于 Dynamic Columns Reactive Forms in Angular

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

Cannot find a differ supporting object '[object Object]'

阅读更多关于 Cannot find a differ supporting object '[object Object]'

问题 I have a select tag inside my FormArray and i have fetched option for that select using http from the api. I have following error help me. CashPluckingLeafComponent.html:44 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. <div formArrayName="leaf_grade"> <div *ngFor="let grades of cplForm.controls.leaf_grade.controls; let i=index"> <div [formGroupName]="i"> <div class="form-group"> <label>Leaf