如何在Angular中创建可重用的输入字段？

huangapple
go评论119阅读模式
英文:

How can i create reusable input field in Angular?

问题

我正在尝试创建一个可重复使用的字段，就像我们在react中所做的那样。但我未能成功。我需要一些建议或指导来解决我的问题。实际上，我创建了一个包含输入字段的组件。现在我想在Angular表单中的任何地方使用该字段。请帮助我解决这个问题。

每当我尝试提交时，它总是返回undefined。

任何解决方案都会受到欢迎！

登录表单

  1. <Modal [isOpen]="true" title="Login" actionLabel="Sign in" [onSubmit]="handleSubmit">
  2.   <form [formGroup]="loginForm">
  3.     <div class="flex flex-col gap-4">
  4.       <app-input placeholder="Email" type="email" controlName="email"
  5.         (formControlChange)="handleFormControl('email',$event)" />
  6.       <app-input placeholder="Password" type="password" controlName="password"
  7.         (formControlChange)="handleFormControl('password',$event)" />
  8.     </div>
  9.   </form>
  10. </Modal>
  1. export class LoginModalComponent implements OnInit {
  3.   loginForm!: FormGroup;
  5.   constructor(private fb: FormBuilder) { }
  7.   ngOnInit(): void {
  8.     this.loginForm = this.fb.group({
  9.       email: new FormControl(''),
  10.       password: new FormControl('')
  11.     })
  12.   }
  14.   handleFormControl(formControlName: string, formControl: FormControl) {
  15.     this.loginForm.setControl(formControlName, formControl);
  16.   }
  18.   handleSubmit(): void {
  19.     console.log(this.loginForm);
  20.   }
  21. }

输入组件

  1. import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
  2. import { FormControl, Validators } from '@angular/forms';
  4. @Component({
  5.   selector: 'app-input',
  6.   template: `
  7.     <input
  8.         [placeholder]="placeholder"
  9.         [formControl]="formControl"
  10.         class="
  11.           w-full
  12.           p-4
  13.           text-lg
  14.           bg-black
  15.           border-2
  16.           border-neutral-800
  17.           rounded-md
  18.           outline-none
  19.           text-white
  20.           focus:border-sky-500
  21.           focus:border-2
  22.           transition
  23.           disabled:bg-neutral-900
  24.           disabled:opacity-70
  25.           disabled:cursor-not-allowed
  26.         "
  27.         [type]="type"
  28.     >
  29.   `,
  30.   styles: [
  31.   ]
  32. })
  33. export class InputComponent implements OnInit {
  34.   @Input('placeholder') placeholder: string = '';
  35.   @Input('controlName') controlName: string = '';
  36.   @Input('type') type: string = 'text';
  37.   @Input() required: boolean = false;
  38.   @Input() email: boolean = false;
  40.   @Output() formControlChange = new EventEmitter<FormControl>();
  41.   formControl!: FormControl;
  43.   ngOnInit(): void {
  44.     this.initializeFormControl()
  45.     this.subscribeToValueChange()
  46.   }
  48.   initializeFormControl(): void {
  49.     const validators = [];
  50.     if (this.required) {
  51.       validators.push(Validators.required)
  52.     }
  54.     if (this.email) {
  55.       validators.push(Validators.email);
  56.     }
  58.     this.formControl = new FormControl('', validators);
  59.   }
  61.   subscribeToValueChange(): void {
  62.     this.formControl.valueChanges.subscribe((value) => {
  63.       this.formControlChange.emit(this.formControl);
  64.     })
  65.   }
  66. }
英文:

I am trying to create a reusable field as we do in react. But I failed to do that. I need some suggestions or guidance to fix my issue. Actually, I created a component that holds the input field. Now I want to use that field everywhere in the Angular forms. Please help me to fix this.

>Whenever i try to submit it always return undefined.

Any solution appreciated!

Login Form

  1. &lt;Modal [isOpen]=&quot;true&quot; title=&quot;Login&quot; actionLabel=&quot;Sign in&quot; [onSubmit]=&quot;handleSubmit&quot;&gt;
  2. &lt;form [formGroup]=&quot;loginForm&quot;&gt;
  3. &lt;div class=&quot;flex flex-col gap-4&quot;&gt;
  4. &lt;app-input placeholder=&quot;Email&quot; type=&quot;email&quot; controlName=&quot;email&quot;
  5. (formControlChange)=&quot;handleFormControl(&#39;email&#39;,$event)&quot; /&gt;
  6. &lt;app-input placeholder=&quot;Password&quot; type=&quot;password&quot; controlName=&quot;password&quot;
  7. (formControlChange)=&quot;handleFormControl(&#39;password&#39;,$event)&quot; /&gt;
  8. &lt;/div&gt;
  9. &lt;/form&gt;
  10. &lt;/Modal&gt;
  11. export class LoginModalComponent implements OnInit {
  12. loginForm!: FormGroup;
  13. constructor(private fb: FormBuilder) { }
  14. ngOnInit(): void {
  15. this.loginForm = this.fb.group({
  16. email: new FormControl(&#39;&#39;),
  17. password: new FormControl(&#39;&#39;)
  18. })
  19. }
  20. handleFormControl(formControlName: string, formControl: FormControl) {
  21. this.loginForm.setControl(formControlName, formControl);
  22. }
  23. handleSubmit(): void {
  24. console.log(this.loginForm);
  25. }
  26. }

Input Component

  1. import { Component, Input, Output, EventEmitter, OnInit } from &#39;@angular/core&#39;;
  2. import { FormControl, Validators } from &#39;@angular/forms&#39;;
  3. @Component({
  4. selector: &#39;app-input&#39;,
  5. template: `
  6. &lt;input
  7. [placeholder]=&quot;placeholder&quot;
  8. [formControl]=&quot;formControl&quot;
  9. class=&quot;
  10. w-full
  11. p-4
  12. text-lg
  13. bg-black
  14. border-2
  15. border-neutral-800
  16. rounded-md
  17. outline-none
  18. text-white
  19. focus:border-sky-500
  20. focus:border-2
  21. transition
  22. disabled:bg-neutral-900
  23. disabled:opacity-70
  24. disabled:cursor-not-allowed
  25. &quot;
  26. [type]=&quot;type&quot;
  27. &gt;
  28. `,
  29. styles: [
  30. ]
  31. })
  32. export class InputComponent implements OnInit {
  33. @Input(&#39;placeholder&#39;) placeholder: string = &#39;&#39;;
  34. @Input(&#39;controlName&#39;) controlName: string = &#39;&#39;;
  35. @Input(&#39;type&#39;) type: string = &#39;text&#39;;
  36. @Input() required: boolean = false;
  37. @Input() email: boolean = false;
  38. @Output() formControlChange = new EventEmitter&lt;FormControl&gt;();
  39. formControl!: FormControl;
  40. ngOnInit(): void {
  41. this.initializeFormControl()
  42. this.subscribeToValueChange()
  43. // this.formControlChange.emit(this.formControl);
  44. }
  45. initializeFormControl(): void {
  46. const validators = [];
  47. if (this.required) {
  48. validators.push(Validators.required)
  49. }
  50. if (this.email) {
  51. validators.push(Validators.email);
  52. }
  53. this.formControl = new FormControl(&#39;&#39;, validators);
  54. }
  55. subscribeToValueChange(): void {
  56. this.formControl.valueChanges.subscribe((value) =&gt; {
  57. this.formControlChange.emit(this.formControl);
  58. })
  59. }
  60. }

答案1

得分: 1

你的代码中我看不到 "submit" 部分。但你的代码也能正常工作。这是主要组件：

  1. import 'zone.js/dist/zone';
  2. import { Component, OnInit } from '@angular/core';
  3. import { CommonModule } from '@angular/common';
  4. import { bootstrapApplication } from '@angular/platform-browser';
  5. import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
  6. import { InputComponent } from './input/input.component';
  8. @Component({
  9.   selector: 'my-app',
  10.   standalone: true,
  11.   imports: [CommonModule, ReactiveFormsModule, FormsModule, InputComponent],
  12.   template: `
  13.     <h1>Hello from {{name}}!</h1>
  14.     <a target="_blank" href="https://angular.io/start">
  15.       Learn more about Angular 
  16.     </a>
  18.     <form [formGroup]="loginForm" (ngSubmit)="handleSubmit()">
  19.       <div class="flex flex-col gap-4">
  20.         <app-input placeholder="Email" type="email" controlName="email"
  21.           (formControlChange)="handleFormControl('email',$event)" />
  22.         <app-input placeholder="Password" type="password" controlName="password"
  23.           (formControlChange)="handleFormControl('password',$event)" />
  24.       </div>
  25.       <button>SUBMIT</button>
  26.     </form>
  27.   `,
  28. })
  29. export class App implements OnInit {
  30.   name = 'Angular';
  31.   loginForm!: FormGroup;
  33.   constructor(private fb: FormBuilder) { }
  35.   ngOnInit(): void {
  36.     this.loginForm = this.fb.group({
  37.       email: new FormControl(''),
  38.       password: new FormControl('')
  39.     })
  40.   }
  42.   handleFormControl(formControlName: string, formControl: FormControl) {
  43.     this.loginForm.setControl(formControlName, formControl);
  44.   }
  46.   handleSubmit(): void {
  47.     console.log(this.loginForm.value);
  48.   }
  49. }
  51. bootstrapApplication(App);

这是输入组件：

  1. import { CommonModule } from '@angular/common';
  2. import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
  3. import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
  5. @Component({
  6.   selector: 'app-input',
  7.   template: `
  8.     <input
  9.         [placeholder]="placeholder"
  10.         [formControl]="formControl"
  11.         class="
  12.           w-full
  13.           p-4
  14.           text-lg
  15.           bg-black
  16.           border-2
  17.           border-neutral-800
  18.           rounded-md
  19.           outline-none
  20.           text-white
  21.           focus:border-sky-500
  22.           focus:border-2
  23.           transition
  24.           disabled:bg-neutral-900
  25.           disabled:opacity-70
  26.           disabled:cursor-not-allowed
  27.         "
  28.         [type]="type"
  29.     >
  30.   `,
  31.   standalone: true,
  32.   imports: [CommonModule, ReactiveFormsModule],
  33.   styles: [
  34.   ]
  35. })
  36. export class InputComponent implements OnInit {
  37.   @Input('placeholder') placeholder: string = '';
  38.   @Input('controlName') controlName: string = '';
  39.   @Input('type') type: string = 'text';
  40.   @Input() required: boolean = false;
  41.   @Input() email: boolean = false;
  43.   @Output() formControlChange = new EventEmitter<FormControl>();
  44.   formControl!: FormControl;
  46.   ngOnInit(): void {
  47.     this.initializeFormControl()
  48.     this.subscribeToValueChange()
  49.   }
  51.   initializeFormControl(): void {
  52.     const validators = [];
  53.     if (this.required) {
  54.       validators.push(Validators.required)
  55.     }
  57.     if (this.email) {
  58.       validators.push(Validators.email);
  59.     }
  61.     this.formControl = new FormControl('', validators);
  62.   }
  64.   subscribeToValueChange(): void {
  65.     this.formControl.valueChanges.subscribe((value) => {
  66.       this.formControlChange.emit(this.formControl);
  67.     })
  68.   }
  69. }

我只添加了 (ngSubmit) 并更改了 handleSubmit() 来打印 value。在 Stackblitz 上尝试并告诉我是否有任何问题。

英文:

In your code I see no "submit" part. But your code work as well. This is the main component:

  1. import &#39;zone.js/dist/zone&#39;;
  2. import { Component, OnInit } from &#39;@angular/core&#39;;
  3. import { CommonModule } from &#39;@angular/common&#39;;
  4. import { bootstrapApplication } from &#39;@angular/platform-browser&#39;;
  5. import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from &#39;@angular/forms&#39;;
  6. import { InputComponent } from &#39;./input/input.component&#39;;
  7. @Component({
  8. selector: &#39;my-app&#39;,
  9. standalone: true,
  10. imports: [CommonModule, ReactiveFormsModule, FormsModule, InputComponent],
  11. template: `
  12. &lt;h1&gt;Hello from {{name}}!&lt;/h1&gt;
  13. &lt;a target=&quot;_blank&quot; href=&quot;https://angular.io/start&quot;&gt;
  14. Learn more about Angular 
  15. &lt;/a&gt;
  16. &lt;form [formGroup]=&quot;loginForm&quot; (ngSubmit)=&quot;handleSubmit()&quot;&gt;
  17. &lt;div class=&quot;flex flex-col gap-4&quot;&gt;
  18. &lt;app-input placeholder=&quot;Email&quot; type=&quot;email&quot; controlName=&quot;email&quot;
  19. (formControlChange)=&quot;handleFormControl(&#39;email&#39;,$event)&quot; /&gt;
  20. &lt;app-input placeholder=&quot;Password&quot; type=&quot;password&quot; controlName=&quot;password&quot;
  21. (formControlChange)=&quot;handleFormControl(&#39;password&#39;,$event)&quot; /&gt;
  22. &lt;/div&gt;
  23. &lt;button&gt;SUBMIT&lt;/button&gt;
  24. &lt;/form&gt;
  25. `,
  26. })
  27. export class App implements OnInit {
  28. name = &#39;Angular&#39;;
  29. loginForm!: FormGroup;
  30. constructor(private fb: FormBuilder) { }
  31. ngOnInit(): void {
  32. this.loginForm = this.fb.group({
  33. email: new FormControl(&#39;&#39;),
  34. password: new FormControl(&#39;&#39;)
  35. })
  36. }
  37. handleFormControl(formControlName: string, formControl: FormControl) {
  38. this.loginForm.setControl(formControlName, formControl);
  39. }
  40. handleSubmit(): void {
  41. console.log(this.loginForm.value);
  42. }
  43. }
  44. bootstrapApplication(App);

And this the input component:

  1. import { CommonModule } from &#39;@angular/common&#39;;
  2. import { Component, Input, Output, EventEmitter, OnInit } from &#39;@angular/core&#39;;
  3. import { FormControl, ReactiveFormsModule, Validators } from &#39;@angular/forms&#39;;
  4. @Component({
  5. selector: &#39;app-input&#39;,
  6. template: `
  7. &lt;input
  8. [placeholder]=&quot;placeholder&quot;
  9. [formControl]=&quot;formControl&quot;
  10. class=&quot;
  11. w-full
  12. p-4
  13. text-lg
  14. bg-black
  15. border-2
  16. border-neutral-800
  17. rounded-md
  18. outline-none
  19. text-white
  20. focus:border-sky-500
  21. focus:border-2
  22. transition
  23. disabled:bg-neutral-900
  24. disabled:opacity-70
  25. disabled:cursor-not-allowed
  26. &quot;
  27. [type]=&quot;type&quot;
  28. &gt;
  29. `,
  30. standalone: true,
  31. imports: [CommonModule, ReactiveFormsModule],
  32. styles: [
  33. ]
  34. })
  35. export class InputComponent implements OnInit {
  36. @Input(&#39;placeholder&#39;) placeholder: string = &#39;&#39;;
  37. @Input(&#39;controlName&#39;) controlName: string = &#39;&#39;;
  38. @Input(&#39;type&#39;) type: string = &#39;text&#39;;
  39. @Input() required: boolean = false;
  40. @Input() email: boolean = false;
  41. @Output() formControlChange = new EventEmitter&lt;FormControl&gt;();
  42. formControl!: FormControl;
  43. ngOnInit(): void {
  44. this.initializeFormControl()
  45. this.subscribeToValueChange()
  46. // this.formControlChange.emit(this.formControl);
  47. }
  48. initializeFormControl(): void {
  49. const validators = [];
  50. if (this.required) {
  51. validators.push(Validators.required)
  52. }
  53. if (this.email) {
  54. validators.push(Validators.email);
  55. }
  56. this.formControl = new FormControl(&#39;&#39;, validators);
  57. }
  58. subscribeToValueChange(): void {
  59. this.formControl.valueChanges.subscribe((value) =&gt; {
  60. this.formControlChange.emit(this.formControl);
  61. })
  62. }
  63. }

I have only added the (ngSubmit) and changed the handleSubmit() to print the value. Try it on Stackblitz and tell me if anything goes wrong.

答案2

得分: 1

你可以使用 NG_VALUE_ACCESSOR 实现来创建可重用的自定义表单控件组件。

示例链接：https://stackblitz.com/edit/angular-module-4xcvpm?file=src%2Fapp%2Fmodel.compoennt.ts

input.component.ts

  1. import { Component, Input, forwardRef, OnInit } from '@angular/core';
  2. import {
  3.   ControlValueAccessor,
  4.   NG_VALUE_ACCESSOR,
  5.   Validators,
  6.   FormControl,
  7.   ValidatorFn,
  8. } from '@angular/forms';
  10. @Component({
  11.   selector: 'app-input',
  12.   template: `
  13.     <input
  14.         [placeholder]="placeholder"
  15.         [formControl]="formControl"
  16.         class="
  17.           w-full
  18.           p-4
  19.           text-lg
  20.           bg-black
  21.           border-2
  22.           border-neutral-800
  23.           rounded-md
  24.           outline-none
  25.           text-white
  26.           focus:border-sky-500
  27.           focus:border-2
  28.           transition
  29.           disabled:bg-neutral-900
  30.           disabled:opacity-70
  31.           disabled:cursor-not-allowed
  32.         "
  33.         [type]="type"
  34.     >
  35.   `,
  36.   providers: [
  37.     {
  38.       provide: NG_VALUE_ACCESSOR,
  39.       useExisting: forwardRef(() => InputComponent),
  40.       multi: true,
  41.     },
  42.   ],
  43.   styles: [],
  44. })
  45. export class InputComponent implements OnInit, ControlValueAccessor {
  46.   @Input('placeholder') placeholder: string = '';
  47.   @Input('type') type: string = 'text';
  48.   @Input() required: boolean = false;
  49.   @Input() email: boolean = false;
  51.   formControl!: FormControl;
  52.   onTouched: any;
  53.   onChange: any;
  55.   ngOnInit(): void {
  56.     const validators: ValidatorFn[] = [];
  58.     if (this.required) {
  59.       validators.push(Validators.required);
  60.     }
  62.     if (this.email) {
  63.       validators.push(Validators.email);
  64.     }
  66.     this.formControl = new FormControl('', validators);
  67.   }
  69.   writeValue(value: any): void {
  70.     this.formControl.setValue(value);
  71.   }
  73.   registerOnChange(fn: any): void {
  74.     this.onChange = fn;
  75.     this.formControl.valueChanges.subscribe(fn);
  76.   }
  78.   registerOnTouched(fn: any): void {
  79.     this.onTouched = fn;
  80.   }
  82.   setDisabledState(isDisabled: boolean): void {
  83.     isDisabled ? this.formControl.disable() : this.formControl.enable();
  84.   }
  85. }

login-modal.component.ts

  1. import { Component, OnInit } from '@angular/core';
  2. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  4. @Component({
  5.   selector: 'app-login-modal',
  6.   template: `
  7.     <Modal [isOpen]="true" title="Login" actionLabel="Sign in" (submit)="handleSubmit()">
  8.       <form [formGroup]="loginForm">
  9.         <div class="flex flex-col gap-4">
  10.           <app-input placeholder="Email" type="email" required="true" email="true" formControlName="email"></app-input>
  11.           <app-input placeholder="Password" type="password" required="true" formControlName="password"></app-input>
  12.         </div>
  13.       </form>
  14.     </Modal>
  15.   `,
  16.   styles: [],
  17. })
  18. export class LoginModalComponent implements OnInit {
  19.   loginForm!: FormGroup;
  21.   constructor(private fb: FormBuilder) {}
  23.   ngOnInit(): void {
  24.     this.loginForm = this.fb.group({
  25.       email: ['', [Validators.required, Validators.email]],
  26.       password: ['', Validators.required],
  27.     });
  29.     this.loginForm.get('email')!.valueChanges.subscribe((value) => {
  30.       console.log('email value changed:', value);
  31.     });
  33.     this.loginForm.get('password')!.valueChanges.subscribe((value) => {
  34.       console.log('password value changed:', value);
  35.     });
  36.   }
  38.   handleSubmit(): void {
  39.     console.log('hello');
  40.     console.log(this.loginForm.value);
  41.   }
  42. }

modal.component.ts

  1. import { Component, Input, Output, EventEmitter } from '@angular/core';
  3. @Component({
  4.   selector: 'Modal',
  5.   template: `
  6.     <div *ngIf="isOpen" class="modal">
  7.       <h2>{{ title }}</h2>
  8.       <ng-content></ng-content>
  9.       <button (click)="submit.emit()">{{ actionLabel }}</button>
  10.     </div>
  11.   `,
  12. })
  13. export class ModalComponent {
  14.   @Input() isOpen: boolean = false;
  15.   @Input() title: string = '';
  16.   @Input() actionLabel: string = '';
  17.   @Output() submit = new EventEmitter<void>();
  18. }
英文:

You can use NG_VALUE_ACCESSOR implementation for reusable custom form control components

demo : https://stackblitz.com/edit/angular-module-4xcvpm?file=src%2Fapp%2Fmodel.compoennt.ts

input.component.ts

  1. import { Component, Input, forwardRef, OnInit } from &#39;@angular/core&#39;;
  2. import {
  3. ControlValueAccessor,
  4. NG_VALUE_ACCESSOR,
  5. Validators,
  6. FormControl,
  7. ValidatorFn,
  8. } from &#39;@angular/forms&#39;;
  9. @Component({
  10. selector: &#39;app-input&#39;,
  11. template: `
  12. &lt;input
  13. [placeholder]=&quot;placeholder&quot;
  14. [formControl]=&quot;formControl&quot;
  15. class=&quot;
  16. w-full
  17. p-4
  18. text-lg
  19. bg-black
  20. border-2
  21. border-neutral-800
  22. rounded-md
  23. outline-none
  24. text-white
  25. focus:border-sky-500
  26. focus:border-2
  27. transition
  28. disabled:bg-neutral-900
  29. disabled:opacity-70
  30. disabled:cursor-not-allowed
  31. &quot;
  32. [type]=&quot;type&quot;
  33. &gt;`,
  34. providers: [
  35. {
  36. provide: NG_VALUE_ACCESSOR,
  37. useExisting: forwardRef(() =&gt; InputComponent),
  38. multi: true,
  39. },
  40. ],
  41. styles: [],
  42. })
  43. export class InputComponent implements OnInit, ControlValueAccessor {
  44. @Input(&#39;placeholder&#39;) placeholder: string = &#39;&#39;;
  45. @Input(&#39;type&#39;) type: string = &#39;text&#39;;
  46. @Input() required: boolean = false;
  47. @Input() email: boolean = false;
  48. formControl!: FormControl;
  49. onTouched: any;
  50. onChange: any;
  51. ngOnInit(): void {
  52. const validators: ValidatorFn[] = [];
  53. if (this.required) {
  54. validators.push(Validators.required);
  55. }
  56. if (this.email) {
  57. validators.push(Validators.email);
  58. }
  59. this.formControl = new FormControl(&#39;&#39;, validators);
  60. }
  61. writeValue(value: any): void {
  62. this.formControl.setValue(value);
  63. }
  64. registerOnChange(fn: any): void {
  65. this.onChange = fn;
  66. this.formControl.valueChanges.subscribe(fn);
  67. }
  68. registerOnTouched(fn: any): void {
  69. this.onTouched = fn;
  70. }
  71. setDisabledState(isDisabled: boolean): void {
  72. isDisabled ? this.formControl.disable() : this.formControl.enable();
  73. }
  74. }

login-modal.component.ts

  1. import { Component, OnInit } from &#39;@angular/core&#39;;
  2. import { FormBuilder, FormGroup, Validators } from &#39;@angular/forms&#39;;
  3. @Component({
  4. selector: &#39;app-login-modal&#39;,
  5. template: `
  6. &lt;Modal [isOpen]=&quot;true&quot; title=&quot;Login&quot; actionLabel=&quot;Sign in&quot; (submit)=&quot;handleSubmit()&quot;&gt;
  7. &lt;form [formGroup]=&quot;loginForm&quot;&gt;
  8. &lt;div class=&quot;flex flex-col gap-4&quot;&gt;
  9. &lt;app-input placeholder=&quot;Email&quot; type=&quot;email&quot; required=&quot;true&quot; email=&quot;true&quot; formControlName=&quot;email&quot;&gt;&lt;/app-input&gt;
  10. &lt;app-input placeholder=&quot;Password&quot; type=&quot;password&quot; required=&quot;true&quot; formControlName=&quot;password&quot;&gt;&lt;/app-input&gt;
  11. &lt;/div&gt;
  12. &lt;/form&gt;
  13. &lt;/Modal&gt;
  14. `,
  15. styles: [],
  16. })
  17. export class LoginModalComponent implements OnInit {
  18. loginForm!: FormGroup;
  19. constructor(private fb: FormBuilder) {}
  20. ngOnInit(): void {
  21. this.loginForm = this.fb.group({
  22. email: [&#39;&#39;, [Validators.required, Validators.email]],
  23. password: [&#39;&#39;, Validators.required],
  24. });
  25. this.loginForm.get(&#39;email&#39;)!.valueChanges.subscribe((value) =&gt; {
  26. console.log(&#39;email value changed:&#39;, value);
  27. });
  28. this.loginForm.get(&#39;password&#39;)!.valueChanges.subscribe((value) =&gt; {
  29. console.log(&#39;password value changed:&#39;, value);
  30. });
  31. }
  32. handleSubmit(): void {
  33. console.log(&#39;heloo&#39;);
  34. console.log(this.loginForm.value);
  35. }
  36. }

modal.component.ts

  1. import { Component, Input, Output, EventEmitter } from &#39;@angular/core&#39;;
  2. @Component({
  3. selector: &#39;Modal&#39;,
  4. template: `
  5. &lt;div *ngIf=&quot;isOpen&quot; class=&quot;modal&quot;&gt;
  6. &lt;h2&gt;{{ title }}&lt;/h2&gt;
  7. &lt;ng-content&gt;&lt;/ng-content&gt;
  8. &lt;button (click)=&quot;submit.emit()&quot;&gt;{{ actionLabel }}&lt;/button&gt;
  9. &lt;/div&gt;
  10. `,
  11. })
  12. export class ModalComponent {
  13. @Input() isOpen: boolean = false;
  14. @Input() title: string = &#39;&#39;;
  15. @Input() actionLabel: string = &#39;&#39;;
  16. @Output() submit = new EventEmitter&lt;void&gt;();
  17. }

huangapple
  • 本文由 发表于 2023年6月11日 20:56:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/76450563.html
  • angular
  • angular-reactive-forms
  • javascript
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定