angular-reactive-forms

问题 In Angular , is there a way to identify which FormGroup / FormControl in a dynamic FormArray emitted the valueChanges event? My FormArray is dynamic. It starts out empty and users could add a FormGroup to the FormArray by clicking a button. When valueChanges, I need to re-validate the control. Since I dont know which control emitted the event, I loop through the entire FormArray and validate all FormGroup / FormControl even though only one control changed - and this is every time when

问题 How do i use formGroupName inside child components? for example: i have ParentFormComponent parentForm: FormGroup; constructor(private fb: FormBuilder, private http: Http) { } ngOnInit() { this.parentForm = this.fb.group({ _general: this.fb.group ({ ProjectName:'' }) }) } In the html: <form [formGroup]="parentForm" (ngSubmit)="submitForm()"> <div formGroupName="_general"> <mat-form-field> <input matInput placeholder="Project name" formControlName="ProjectName"> </mat-form-field> </div> </form

问题 How to make a formControl in angular readonly I know i can do it in html like <input type="text" formControlName="xyz" readonly /> how to do it from JS Code and not html i.e in a model driven way 回答1: If you are using Reactive Forms you can assign it dynamically like in the example code below (email field) this.registerForm = this.formBuilder.group({ first_name: ['', Validators.required], last_name: ['', Validators.required], email: new FormControl({value: null, disabled: true}, Validators

问题 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. 回答1: You simply pass the

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

问题 How to check status of myform in component to check if all the fields are filled or not? HTML: <div [formGroup]="myform"> <div *ngFor="let question of questions"> <label>{{question.question}}</label> <select required > <option selected disabled="disabled">Option</option> <option *ngFor="let option of question['options']">{{option}}</option> </select> </div> </div> </div> Question JSON coming from API: this.questions = [ { question: 'What is your age?', options: ['20', '30', '40'] }, {

问题 How to check status of myform in component to check if all the fields are filled or not? HTML: <div [formGroup]="myform"> <div *ngFor="let question of questions"> <label>{{question.question}}</label> <select required > <option selected disabled="disabled">Option</option> <option *ngFor="let option of question['options']">{{option}}</option> </select> </div> </div> </div> Question JSON coming from API: this.questions = [ { question: 'What is your age?', options: ['20', '30', '40'] }, {

问题 In my Angular 2 form, I have the following typescript: export class UserEditComponent implements OnChanges { @Input() userModel: IUserModel; @Output() onSave: EventEmitter<IUserModel> = new EventEmitter<IUserModel>(); @ViewChild("userEditForm") userEditForm: FormControl; private userNameIsValid = true; constructor(private httpService: HttpService) { } ngOnChanges (changes: SimpleChanges) { this.userEditForm.resetForm(); console.log(this.userEditForm); } .... } and template html: <form class=

问题 Based on this question on stack, I need to bind a drop down list, for each row generated from angular material table dataSource . The drop down list should select automatically the correspondent value, as other values. This is table: <form [formGroup]="formGroup"> <table mat-table [dataSource]="dataSource" matSort> <!-- <ng-container matColumnDef="ind_id"> <th mat-header-cell *matHeaderCellDef> Ind. ID </th> <td mat-cell *matCellDef="let element"> {{element.iid}} </td> </ng-container> --> <ng

问题 I am trying to patch the object received from webapi to an angular reactive form. The form also has a formarray. But, despite having more than 3 or more records only 2 records are being patched to the formarray of the reactive form. I have two entities noseries and noseriesList, where a noseries has zero or many noseriesLists. So after obtaining noseries from webapi, i want to patch properties and navigation list "noseriesLists" of noseries into reactive form. Rest of the properties are being