angular-forms

问题 Below is my component file(login.component.html) <form > <div id="login-container" [class.mat-elevation-z12]="!isActive" [class.mat-elevation-z8]="isActive"> <h2>Login</h2> <mat-form-field class="example-full-width"> <input matInput placeholder="Email address" [formControl]="emailFormControl" required> <mat-error *ngIf="emailFormControl.hasError('required')"> Please enter email id </mat-error> </mat-form-field> <mat-form-field > <input matInput placeholder="Password" minlength="6" maxlength=

问题 Image contains problem I have created a form and it is adding rows dynamically from add button but i have also created a button from which i need to add only some components from that link.Add more link button is used to create only those two components. i have used nested form approach, dynamic form approach but not able to do the same. Help needed. HTML:- <div class="container"> <p> </p> <div> <form [formGroup]="searchForm" novalidate (ngSubmit)="submit(searchForm.value)"> <div

问题 I am trying to create a form with inputs that only update onBlur ( [ngFormOptions]="{updateOn: 'blur'}" ). But a side effect of this is that the form is no longer submitted once the user hits 'enter', since the model is only updated onBlur. (same as this question, but it has no answer) As a result of this the form is marked invalid, since there is a value in the input field, but the model is not yet updated with the value. Versions: - Angular 6.0.7 - @angular/forms 6.0.7 HTML example <form

问题 I have a simple login page with a reactive form and subform component app-login-form that uses ControlValueAccessor , which is working, but I can't figure out how to display the errors in the subform. This is an example before I start creating more complex forms. When submitted I try to access the subform and markAllAsTouched , but when I'm watching the elements that the classes don't change. I made a quick StackBlitz to show what I'm doing. How do I get the error messages to show up when I

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

问题 I have the following code that dynamically adds a form group containing a title and two radio buttons to create a condition, effectively providing its title and whether or not it's an acceptable condition: export enum Acceptability { ACCEPTABLE, INACCEPTABLE } export interface Condition { title: string; acceptability: Acceptability; } export class AddCondition implements OnInit { form: FormGroup; ACCEPTABILITY = Acceptability; constructor(private fb: FormBuilder) {} ngOnInit() { // build the

问题 I have a form on a component's template: <form (ngSubmit)="submitLogin(loginForm)" #loginForm="ngForm"> <mat-input-container> <input matInput [placeholder]="'User Name'" ngModel name="username" autofocus required> </mat-input-container> <br> <mat-input-container> <input matInput [placeholder]="'Password'" ngModel type="password" name="password" required> </mat-input-container> <br> <button [disabled]="loginForm.invalid" mat-raised-button type="submit"> Login </button> </form> And here is my

问题 I have a series of forms (each managed by 1 component). There is a pattern of inputs in these forms (e.g. many of them require to allow input of an address) that I have to refactor into re-usable components as they are used in multiple forms and I don't want to duplicate neither their logic nor their templates. Each re-usable component would have to have its logic have its template containing input tags and no <form> tag have its client validation constraints possibly receive initial values

问题 I am creating a dynamic form based on Angular 4 Dynamic Forms . Everything is working out great! However, I have run into an issue with the dropdown. I would like to have a dependent dropdown. When the user selects a value in the dropdown it will display checkboxes, based on an attribute - possibly name . service new DropdownInput({ key: 'dropdown', label: 'Dropdown Testing', options: [ {key: 'example1', value: 'Example 1'}, {key: 'example2', value: 'Example 2'} ], order: 1 }), new

问题 I have two components: ParentComponent and ChildComponent: parent.component.ts <form #form="ngForm" (ngSubmit)="onSubmit(form)" novalidate> <input type="text" name="firstControl" [(ngModel)]="firstControl" /> <input type="text" name="secondControl" [(ngModel)]="secondControl" /> <child-component> </form> {{form.value | json}} child.component.ts <input type="text" name="thirdControl" [(ngModel)]="thirdControl" /> <input type="text" name="fourthControl" [(ngModel)]="fourthControl" /> Now, {