{"id":105871,"date":"2025-04-13T17:47:44","date_gmt":"2025-04-13T13:17:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c%d9%87-%d8%a7%db%8c-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%aa%d8%b1%da%a9%db%8c%d8%a8-%d9%85%d8%ad%d9%88%d8%b1-%d8%a8\/"},"modified":"2025-04-13T17:47:44","modified_gmt":"2025-04-13T13:17:44","slug":"%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c%d9%87-%d8%a7%db%8c-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%aa%d8%b1%da%a9%db%8c%d8%a8-%d9%85%d8%ad%d9%88%d8%b1-%d8%a8","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c%d9%87-%d8%a7%db%8c-%d9%81%d8%b1%d9%85-%d9%87%d8%a7%db%8c-%d8%aa%d8%b1%da%a9%db%8c%d8%a8-%d9%85%d8%ad%d9%88%d8%b1-%d8%a8\/","title":{"rendered":"\u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc: \u0641\u0631\u0645 \u0647\u0627\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u0645\u062d\u0648\u0631 \u0628\u0631 \u0648\u0631\u0627\u062b\u062a"},"content":{"rendered":"
\n

\u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc: \u0641\u0631\u0645 \u0647\u0627\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u0645\u062d\u0648\u0631 \u0628\u0631 \u0648\u0631\u0627\u062b\u062a
\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0634\u06cc \u06af\u0631\u0627 (OOP) \u060c \u062a\u0631\u06a9\u06cc\u0628 (HAS-A)<\/strong> \u06cc\u06a9 \u0645\u0641\u0647\u0648\u0645 \u06a9\u0644\u06cc\u062f\u06cc \u0627\u0633\u062a \u060c \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0648\u0631\u0627\u062b\u062a (IS-A)<\/strong>\u0628\u0634\u0631 <\/p>\n

\u062f\u0631 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u060c \u0645\u0627 \u0627\u063a\u0644\u0628 \u0647\u0646\u06af\u0627\u0645 \u062a\u0632\u0631\u06cc\u0642 \u062e\u062f\u0645\u0627\u062a \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc API \u060c \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646 \u0648 \u063a\u06cc\u0631\u0647 \u0631\u0627 \u0627\u062f\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0627\u0632 \u062a\u0631\u06a9\u06cc\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u0648\u0631\u0627\u062b\u062a – \u06af\u0633\u062a\u0631\u0634 a BaseComponent<\/code> – \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0631\u0627\u06cc\u062c \u0627\u0633\u062a. \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u0635\u0644\u06cc \u062a\u0631\u06cc\u0646 \u0646\u0642\u0627\u0637 \u0642\u0648\u062a \u0648\u0631\u0627\u062b\u062a \u060c \u0631\u0641\u062a\u0627\u0631 \u0645\u0634\u062a\u0631\u06a9 \u0627\u0633\u062a.<\/p>\n

\u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u062e\u0648\u0628 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0627\u0645\u0627 \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u06cc\u06a9 \u0645\u0634\u06a9\u0644 \u0638\u0631\u06cc\u0641 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n

\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u067e\u0627\u06cc\u0647 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0645\u0646\u0637\u0642 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0641\u0631\u0645 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0647\u0631 \u0645\u0624\u0644\u0641\u0647 \u06a9\u0648\u062f\u06a9 (\u062d\u062a\u06cc \u0622\u0646\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0641\u0642\u0637 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f \u060c \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u0646\u062f) \u0631\u0627 \u0645\u062c\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0645\u0646\u0637\u0642 \u0631\u0627 \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0647 \u0622\u0646\u0647\u0627 \u0627\u062d\u062a\u06cc\u0627\u062c \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u060c \u0628\u0647 \u0627\u0631\u062b \u0628\u0628\u0631\u062f. \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u0645\u062d\u06a9\u0645 \u0648 \u0645\u062d\u06a9\u0645 \u0645\u0646\u062c\u0631 \u0634\u0648\u062f.<\/p>\n

\u0633\u0627\u062f\u0647 \u0648 \u062d\u062f\u0627\u0642\u0644 \u0645\u0624\u0644\u0641\u0647 \u067e\u0627\u06cc\u0647 \u06cc\u06a9 \u0631\u0648\u0634 OOP \u0645\u0639\u062a\u0628\u0631 \u0627\u0633\u062a.<\/p>\n

\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0627\u0644\u0641 BaseComponent<\/code> \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f:<\/p>\n

\n
\/\/ src\/app\/shared\/component\/base.component.ts<\/span>\n\n@<\/span>Component<\/span>({<\/span>\n  selector<\/span>:<\/span> ''<\/span>,<\/span>\n  template<\/span>:<\/span> ''<\/span>,<\/span>\n  changeDetection<\/span>:<\/span> ChangeDetectionStrategy<\/span>.<\/span>OnPush<\/span>\n})<\/span>\nexport<\/span> class<\/span> BaseComponent<\/span> {<\/span>\n\n  private<\/span> errorMsg<\/span>:<\/span> WritableSignal<\/span><<\/span>string<\/span>><\/span> =<\/span> signal<\/span>(<\/span>''<\/span>);<\/span>\n  private<\/span> statusMsg<\/span>:<\/span> WritableSignal<\/span><<\/span>string<\/span>><\/span> =<\/span> signal<\/span>(<\/span>''<\/span>);<\/span>\n  private<\/span> ready<\/span>:<\/span> WritableSignal<\/span><<\/span>boolean<\/span>><\/span> =<\/span> signal<\/span>(<\/span>false<\/span>);<\/span>\n\n  protected<\/span> componentReady<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>ready<\/span>.<\/span>set<\/span>(<\/span>true<\/span>);<\/span>\n  }<\/span>\n\n  protected<\/span> resetErrorMessage<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>errorMsg<\/span>.<\/span>set<\/span>(<\/span>''<\/span>);<\/span>\n  }<\/span>\n\n  protected<\/span> resetStatusMessage<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>statusMsg<\/span>.<\/span>set<\/span>(<\/span>''<\/span>);<\/span>\n  }<\/span>\n\n  protected<\/span> updateStatusMessage<\/span>(<\/span>message<\/span>:<\/span> string<\/span> =<\/span> ''<\/span>):<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>statusMsg<\/span>.<\/span>set<\/span>(<\/span>message<\/span>);<\/span>\n  }<\/span>\n\n  protected<\/span> updateErrorMessage<\/span>(<\/span>message<\/span>:<\/span> string<\/span> =<\/span> ''<\/span>):<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>errorMsg<\/span>.<\/span>set<\/span>(<\/span>message<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isComponentReady<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>ready<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> errorMessage<\/span>():<\/span> string<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>errorMsg<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> statusMessage<\/span>():<\/span> string<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>statusMsg<\/span>();<\/span>\n  }<\/span>\n}<\/span>\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u0645\u0646\u0637\u0642 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0648\u0631\u0627\u062b\u062a<\/strong> \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0645\u0644\u0627\u064b \u062e\u0648\u0628 \u0627\u0633\u062a – \u0648\u0642\u062a\u06cc \u0628\u0627 \u062f\u0642\u062a \u0627\u0646\u062c\u0627\u0645 \u0634\u062f.<\/p>\n
\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0635\u062d\u0628\u062a \u0627\u0632 \u0627\u0634\u06a9\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f \u060c \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u067e\u0627\u06a9 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u062a\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u062c\u0627\u06cc \u0648\u0631\u0627\u062b\u062a \u0622\u0646 \u060c \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u062c\u0632\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647:<\/p>\n
    \n
  • \u06cc\u06a9 \u0645\u062f\u0644 \u062f\u0627\u0645\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f (ChatRoom<\/code>)<\/li>\n
  • \u06cc\u06a9 \u0641\u0631\u0645 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0633\u0627\u0632\u06cc\u062f (ChatRoomForm<\/code>)<\/li>\n
  • \u0631\u0627\u0628\u0637 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f (HasForm<\/code> \u0634\u0628\u06cc\u0647 OnInit<\/code>)<\/li>\n
  • \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u067e\u0627\u06cc\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0648\u0633\u0637 \u06a9\u0644\u0627\u0633\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0641\u0631\u0645 \u06af\u0633\u062a\u0631\u0634 \u06cc\u0627\u0628\u062f.<\/li>\n<\/ul>\n
    \u0628\u062e\u0634 1: \u0627\u06cc\u062c\u0627\u062f ChatRoom<\/code><\/strong><\/p>\n
    \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0645\u062f\u0644 \u062f\u0627\u0645\u0646\u0647 \u0633\u0627\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0627\u062a\u0627\u0642 \u06af\u067e \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645.<\/p>\n
    \n
    \/\/ src\/app\/model\/domain\/chat-room.ts<\/span>\n\nexport<\/span> class<\/span> ChatRoom<\/span> {<\/span>\n  public<\/span> readonly<\/span> id<\/span>:<\/span> number<\/span> |<\/span> string<\/span>;<\/span>\n  public<\/span> readonly<\/span> title<\/span>:<\/span> string<\/span>;<\/span>\n  public<\/span> readonly<\/span> description<\/span>:<\/span> string<\/span>;<\/span>\n  public<\/span> readonly<\/span> tags<\/span>:<\/span> string<\/span>;<\/span>\n  public<\/span> readonly<\/span> guidelinesOrRules<\/span>:<\/span> string<\/span>;<\/span>\n  public<\/span> readonly<\/span> visibility<\/span>:<\/span> ChatRoomVisibility<\/span>;<\/span>\n\n  public<\/span> constructor<\/span>(<\/span>data<\/span>:<\/span> ChatRoom<\/span>)<\/span> {<\/span>\n    this<\/span>.<\/span>id<\/span> =<\/span> data<\/span>.<\/span>id<\/span> ??<\/span> 0<\/span>;<\/span>\n    this<\/span>.<\/span>title<\/span> =<\/span> data<\/span>.<\/span>title<\/span> ??<\/span> ''<\/span>;<\/span>\n    this<\/span>.<\/span>description<\/span> =<\/span> data<\/span>.<\/span>description<\/span> ??<\/span> ''<\/span>;<\/span>\n    this<\/span>.<\/span>tags<\/span> =<\/span> data<\/span>.<\/span>tags<\/span> ??<\/span> ''<\/span>;<\/span>\n    this<\/span>.<\/span>guidelinesOrRules<\/span> =<\/span> data<\/span>.<\/span>guidelinesOrRules<\/span> ??<\/span> ''<\/span>;<\/span>\n    this<\/span>.<\/span>visibility<\/span> =<\/span> data<\/span>.<\/span>visibility<\/span> ??<\/span> ''<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> static<\/span> of<\/span>(<\/span>data<\/span>:<\/span> ChatRoom<\/span>):<\/span> ChatRoom<\/span> {<\/span>\n    return<\/span> new<\/span> ChatRoom<\/span>(<\/span>data<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> static<\/span> empty<\/span>():<\/span> ChatRoom<\/span> {<\/span>\n    return<\/span> new<\/span> ChatRoom<\/span>({}<\/span> as<\/span> ChatRoom<\/span>);<\/span>\n  }<\/span>\n}<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u0628\u062e\u0634 2: CreatingBaseForm<\/code><\/strong><\/p>\n
    \u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0641\u0631\u0645 \u067e\u0627\u06cc\u0647 \u0631\u0627 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645:<\/p>\n
    \n
    \/\/ src\/app\/model\/form\/base.form.ts<\/span>\n\nexport<\/span> abstract<\/span> class<\/span> BaseForm<\/span><<\/span>T<\/span>><\/span> {<\/span>\n\n  protected<\/span> formGroup<\/span>!<\/span>:<\/span> FormGroup<\/span>;<\/span>\n\n  private<\/span> submitting<\/span>:<\/span> WritableSignal<\/span><<\/span>boolean<\/span>><\/span> =<\/span> signal<\/span>(<\/span>false<\/span>);<\/span>\n  private<\/span> formReady<\/span>:<\/span> WritableSignal<\/span><<\/span>boolean<\/span>><\/span> =<\/span> signal<\/span>(<\/span>false<\/span>);<\/span>\n  private<\/span> formCompleted<\/span>:<\/span> WritableSignal<\/span><<\/span>boolean<\/span>><\/span> =<\/span> signal<\/span>(<\/span>false<\/span>);<\/span>\n\n  protected<\/span> constructor<\/span>()<\/span> {}<\/span>\n\n  protected<\/span> initForm<\/span>():<\/span> void<\/span> {}<\/span>\n\n  protected<\/span> control<\/span>(<\/span>name<\/span>:<\/span> string<\/span>):<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>form<\/span>?.<\/span>get<\/span>(<\/span>name<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> enableFormComplete<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>formCompleted<\/span>.<\/span>set<\/span>(<\/span>true<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> disableFormCompleted<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>formCompleted<\/span>.<\/span>set<\/span>(<\/span>false<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> openForm<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>formReady<\/span>.<\/span>set<\/span>(<\/span>true<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> startSubmitting<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>submitting<\/span>.<\/span>set<\/span>(<\/span>true<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> stopSubmitting<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>submitting<\/span>.<\/span>set<\/span>(<\/span>false<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> form<\/span>():<\/span> FormGroup<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formGroup<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> value<\/span>():<\/span> T<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>form<\/span>.<\/span>value<\/span> as<\/span> T<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isFormValid<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formGroup<\/span>.<\/span>valid<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isFormCompleted<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formCompleted<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isFormReady<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formReady<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isSubmitting<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>submitting<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isNotSubmitting<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> !<\/span>(<\/span>this<\/span>.<\/span>isSubmitting<\/span>);<\/span>\n  }<\/span>\n\n}<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631 formGroup<\/code> \u062d\u0627\u0648\u06cc \u0641\u0631\u0645 \u0634\u0645\u0627 \u0627\u0633\u062a.<\/p>\n
    \u062f\u0631 submitting<\/code> \u0633\u06cc\u06af\u0646\u0627\u0644 \u0648\u0636\u0639\u06cc\u062a \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u0634\u0645\u0627 \u0631\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u062a\u0627 \u0632\u0645\u0627\u0646 \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u0647\u0627\u06cc \u0645\u062a\u0639\u062f\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
    \u062f\u0631 formReady<\/code> \u0633\u06cc\u06af\u0646\u0627\u0644 \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0646\u0645\u0627\u06cc\u0634 \u0641\u0631\u0645 HTML \u062f\u0631 UI \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0641\u0631\u0645 \u0628\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
    \u062f\u0631 formCompleted<\/code> \u0633\u06cc\u06af\u0646\u0627\u0644 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc UI \u06cc\u0627 \u0627\u0646\u062a\u0642\u0627\u0644 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f.<\/p>\n
    \u062f\u0631 control<\/code> \u0631\u0648\u0634 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u062f\u0648\u0646 \u062a\u06a9\u0631\u0627\u0631 \u0646\u062d\u0648 \u060c \u06a9\u0646\u062a\u0631\u0644 \u0641\u0631\u0645 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u06af\u0631\u0648\u0647 \u0641\u0631\u0645 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:<\/p>\n
    \n
      public<\/span> get<\/span> title<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>control<\/span>(<\/span>'<\/span>title<\/span>'<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> description<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>control<\/span>(<\/span>'<\/span>description<\/span>'<\/span>);<\/span>\n  }<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627<\/p>\n
    \n
      public<\/span> get<\/span> title<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formGroup<\/span>?.<\/span>get<\/span>(<\/span>'<\/span>title<\/span>'<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> description<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formGroup<\/span>?.<\/span>get<\/span>(<\/span>'<\/span>description<\/span>'<\/span>);<\/span>\n  }<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u0646\u0627\u0645 \u0645\u062a\u063a\u06cc\u0631 \u0641\u0631\u0645 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f \u060c \u0627\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 control<\/code> \u0631\u0648\u0634 \u06cc\u06a9 \u0645\u0646\u0628\u0639 \u0648\u0627\u062d\u062f \u0627\u0632 \u062d\u0642\u06cc\u0642\u062a \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0646\u0637\u0642 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0641\u0631\u0645 \u0645\u062d\u0635\u0648\u0631 \u0645\u06cc \u0634\u0648\u062f. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062a\u063a\u06cc\u06cc\u0631\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u060c \u0641\u0642\u0637 \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n
    \u062f\u0631 getter<\/code> \u0648 \u0631\u0648\u0634 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627\u0647\u06cc \u0627\u0633\u062a \u0645\u062d\u0627\u0635\u0631\u0647 \u06a9\u0646\u0646\u062f\u0647<\/em> \u0645\u0646\u0637\u0642 \u0648 \u0631\u0641\u062a\u0627\u0631 \u0641\u0631\u0645 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n
    \u0628\u062e\u0634 3: CreatingChatRoomForm<\/code><\/strong><\/p>\n
    \u0627\u06a9\u0646\u0648\u0646 \u060c \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f ChatRoomForm<\/code><\/p>\n
    \n
    \/\/ src\/app\/model\/form\/chat-room.form.ts<\/span>\n\nexport<\/span> class<\/span> ChatRoomForm<\/span> extends<\/span> BaseForm<\/span><<\/span>CreateChatRoomPayload<\/span>><\/span> {<\/span>\n\n  private<\/span> constructor<\/span>(<\/span>\n      private<\/span> formBuilder<\/span>:<\/span> FormBuilder<\/span>,<\/span>\n      private<\/span> chatRoom<\/span>:<\/span> ChatRoom<\/span>)<\/span> {<\/span>\n    super<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> title<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>control<\/span>(<\/span>'<\/span>title<\/span>'<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> description<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>control<\/span>(<\/span>'<\/span>description<\/span>'<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> guidelines<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>control<\/span>(<\/span>'<\/span>guidelinesOrRules<\/span>'<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> tags<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>control<\/span>(<\/span>'<\/span>tags<\/span>'<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> visibility<\/span>():<\/span> AbstractControl<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>control<\/span>(<\/span>'<\/span>visibility<\/span>'<\/span>);<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> visibilities<\/span>():<\/span> string<\/span>[]<\/span> {<\/span>\n    return<\/span> Object<\/span>.<\/span>values<\/span>(<\/span>ChatRoomVisibility<\/span>);<\/span>\n  }<\/span>\n\n  protected<\/span> override<\/span> initForm<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>formGroup<\/span> =<\/span> this<\/span>.<\/span>formBuilder<\/span>.<\/span>group<\/span>({<\/span>\n      title<\/span>:<\/span> [<\/span>this<\/span>.<\/span>chatRoom<\/span>.<\/span>title<\/span>,<\/span> [<\/span>\n        required<\/span>,<\/span>\n        minLength<\/span>(<\/span>10<\/span>),<\/span>\n        maxLength<\/span>(<\/span>500<\/span>),<\/span>\n      ]],<\/span>\n\n      description<\/span>:<\/span> [<\/span>this<\/span>.<\/span>chatRoom<\/span>.<\/span>description<\/span>,<\/span> [<\/span>\n        required<\/span>,<\/span>\n        maxLength<\/span>(<\/span>1000<\/span>),<\/span>\n      ]],<\/span>\n\n      tags<\/span>:<\/span> [<\/span>this<\/span>.<\/span>chatRoom<\/span>.<\/span>tags<\/span>,<\/span> [<\/span>\n        required<\/span>,<\/span>\n        minLength<\/span>(<\/span>10<\/span>),<\/span>\n        maxLength<\/span>(<\/span>500<\/span>),<\/span>\n      ]],<\/span>\n\n      guidelinesOrRules<\/span>:<\/span> [<\/span>this<\/span>.<\/span>chatRoom<\/span>.<\/span>guidelinesOrRules<\/span>,<\/span> [<\/span>\n        required<\/span>,<\/span>\n        maxLength<\/span>(<\/span>1500<\/span>),<\/span>\n      ]],<\/span>\n\n      visibility<\/span>:<\/span> [<\/span>this<\/span>.<\/span>chatRoom<\/span>.<\/span>visibility<\/span>,<\/span> [<\/span>\n        required<\/span>,<\/span>\n        oneOf<\/span>(<\/span>ChatRoomVisibility<\/span>)<\/span>\n      ]],<\/span>\n\n    });<\/span>\n  }<\/span>\n\n  public<\/span> static<\/span> of<\/span>(<\/span>formBuilder<\/span>:<\/span> FormBuilder<\/span>,<\/span> chatRoom<\/span>:<\/span> ChatRoom<\/span>):<\/span> ChatRoomForm<\/span> {<\/span>\n    const<\/span> chatRoomForm<\/span>:<\/span> ChatRoomForm<\/span> =<\/span> new<\/span> ChatRoomForm<\/span>(<\/span>formBuilder<\/span>,<\/span> chatRoom<\/span>);<\/span>\n    chatRoomForm<\/span>.<\/span>initForm<\/span>();<\/span>\n\n    return<\/span> chatRoomForm<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> static<\/span> empty<\/span>(<\/span>formBuilder<\/span>:<\/span> FormBuilder<\/span>):<\/span> ChatRoomForm<\/span> {<\/span>\n    return<\/span> new<\/span> ChatRoomForm<\/span>(<\/span>formBuilder<\/span>,<\/span> ChatRoom<\/span>.<\/span>empty<\/span>());<\/span>\n  }<\/span>\n}<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631 ChatRoomForm<\/code> \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u062f\u0631 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f \u060c \u06cc\u06a9 \u0633\u0627\u0632\u0646\u062f\u0647 \u062e\u0635\u0648\u0635\u06cc \u062f\u0627\u0631\u062f. \u062f\u0631 \u0639\u0648\u0636 \u060c \u0627\u0632 \u0637\u0631\u06cc\u0642 static of<\/code> \u0631\u0648\u0634 \u060c \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0627\u0644\u06af\u0648\u06cc \u06a9\u0627\u0631\u062e\u0627\u0646\u0647.<\/p>\n
    \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0637\u0631\u06cc\u0642 \u060c \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0644\u0627\u0633 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c \u0647\u0627 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u0632 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0647\u0627\u06cc \u0686\u0646\u062f \u0634\u06a9\u0644 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0628\u062f\u0648\u0646 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u060c \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \/\/ src\/app\/shared\/validators\/index.ts<\/span>\n\nexport<\/span> const<\/span> required<\/span> =<\/span> Validators<\/span>.<\/span>required<\/span>;<\/span>\nexport<\/span> const<\/span> minLength<\/span> =<\/span> Validators<\/span>.<\/span>minLength<\/span>;<\/span>\nexport<\/span> const<\/span> maxLength<\/span> =<\/span> Validators<\/span>.<\/span>maxLength<\/span>;<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f. <\/p>\n
    \u0628\u062e\u0634 4: \u0627\u06cc\u062c\u0627\u062f HasForm<\/code> \u0631\u0627\u0628\u0637<\/strong><\/p>\n
    \u062f\u0631 HasForm<\/code> \u0631\u0627\u0628\u0637 \u060c \u0628\u0631\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u06cc\u06a9 \u0641\u0631\u0645 \u067e\u0631 \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f \u060c \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f:<\/p>\n
    \n
    \/\/ src\/app\/model\/interface\/form\/has-form.interface.ts<\/span>\n\nexport<\/span> interface<\/span> HasForm<\/span> {<\/span>\n\n  formReady<\/span>():<\/span> void<\/span>;<\/span>\n\n  initForm<\/span>(<\/span>data<\/span>?:<\/span> any<\/span>):<\/span> void<\/span>;<\/span>\n\n  startSubmitting<\/span>():<\/span> void<\/span>;<\/span>\n\n  stopSubmitting<\/span>():<\/span> void<\/span>;<\/span>\n\n  completeForm<\/span>():<\/span> void<\/span>;<\/span>\n\n  get<\/span> formModel<\/span>():<\/span> BaseForm<\/span><<\/span>any<\/span>><\/span>;<\/span>\n\n  get<\/span> payload<\/span>():<\/span> any<\/span>;<\/span>\n\n  get<\/span> isFormReady<\/span>():<\/span> boolean<\/span>;<\/span>\n\n  get<\/span> isFormCompleted<\/span>():<\/span> boolean<\/span>;<\/span>\n\n  get<\/span> isFormValid<\/span>():<\/span> boolean<\/span>\n\n  get<\/span> isNotSubmitting<\/span>():<\/span> boolean<\/span>;<\/span>\n\n  get<\/span> isSubmitting<\/span>():<\/span> boolean<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u0627\u06cc\u0646 \u0631\u0648\u0634\u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u0646\u062f\u0647 \u0631\u0641\u062a\u0627\u0631 \u0648 \u0645\u0646\u0637\u0642 \u0641\u0631\u0645 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0645\u062d\u0627\u0635\u0631\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062f\u0631 UI \u0648 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n
    \u0627\u06cc\u0646 \u0631\u0641\u062a\u0627\u0631\u0647\u0627 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631BaseComponent<\/code>\u0642\u0628\u0644 \u0648 \u0633\u067e\u0633 \u0628\u0627 \u06af\u0633\u062a\u0631\u0634 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0628\u0647 \u0627\u0631\u062b \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0647\u0645\u06cc\u0634\u0647 \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0646\u06cc\u0633\u062a \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f ChatRoomItem<\/code> \u0648\u062a ChatRoomList<\/code> \u0628\u0647 \u0637\u0648\u0631 \u0645\u0639\u0645\u0648\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u062f\u0648\u0646 \u062c\u0647\u0634 \u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0622\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f. <\/p>\n
    \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0631\u0627\u0628\u0637 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648 \u0645\u0639\u0645\u0627\u0631\u06cc \u0645\u0624\u0644\u0641\u0647 \u0645\u0648\u062c\u0648\u062f \u062e\u0648\u062f \u0633\u0627\u0632\u06af\u0627\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n
    \u062f\u0631 CreateChatRoom<\/code> \u0645\u0624\u0644\u0641\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f<\/p>\n
    \n
    @<\/span>Component<\/span>({<\/span>\n  selector<\/span>:<\/span> '<\/span>app-create-chat-room<\/span>'<\/span>,<\/span>\n  imports<\/span>:<\/span> [<\/span>\n    ValidationErrorComponent<\/span>,<\/span>\n    ReactiveFormsModule<\/span>,<\/span>\n    FaIconComponent<\/span>,<\/span>\n  ],<\/span>\n  providers<\/span>:<\/span> [<\/span>\n    ChatRoomService<\/span>,<\/span>\n  ],<\/span>\n  templateUrl<\/span>:<\/span> '<\/span>.\/create-chat-room.html<\/span>'<\/span>,<\/span>\n  styleUrl<\/span>:<\/span> '<\/span>.\/create-chat-room.css<\/span>'<\/span>\n})<\/span>\nexport<\/span> class<\/span> CreateChatRoom<\/span> extends<\/span> BaseComponent<\/span> implements<\/span> OnInit<\/span>,<\/span> HasForm<\/span> {<\/span>\n\n  protected<\/span> readonly<\/span> chatRoomService<\/span>:<\/span> ChatRoomService<\/span> =<\/span> inject<\/span>(<\/span>ChatRoomService<\/span>);<\/span>\n  protected<\/span> readonly<\/span> formBuilder<\/span>:<\/span> FormBuilder<\/span> =<\/span> inject<\/span>(<\/span>FormBuilder<\/span>);<\/span>\n\n  protected<\/span> readonly<\/span> chatRoomForm<\/span>:<\/span> WritableSignal<\/span><<\/span>ChatRoomForm<\/span>><\/span> =<\/span> signal<\/span>(<\/span>ChatRoomForm<\/span>.<\/span>empty<\/span>(<\/span>this<\/span>.<\/span>formBuilder<\/span>));<\/span>\n\n  public<\/span> ngOnInit<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>initForm<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> formReady<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>formModel<\/span>.<\/span>openForm<\/span>();<\/span>\n    this<\/span>.<\/span>componentReady<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> completeForm<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>formModel<\/span>.<\/span>completeForm<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> initForm<\/span>():<\/span> void<\/span> {<\/span>\n    const<\/span> createChatRoomForm<\/span>:<\/span> ChatRoomForm<\/span> =<\/span> ChatRoomForm<\/span>.<\/span>of<\/span>(<\/span>this<\/span>.<\/span>formBuilder<\/span>,<\/span> ChatRoom<\/span>.<\/span>empty<\/span>());<\/span>\n    this<\/span>.<\/span>chatRoomForm<\/span>.<\/span>set<\/span>(<\/span>createChatRoomForm<\/span>);<\/span>\n\n    this<\/span>.<\/span>formReady<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> createChatRoom<\/span>():<\/span> void<\/span> {<\/span>\n    if <\/span>(<\/span>this<\/span>.<\/span>isFormValid<\/span> &&<\/span> this<\/span>.<\/span>isNotSubmitting<\/span>)<\/span> {<\/span>\n      this<\/span>.<\/span>startSubmitting<\/span>();<\/span>\n\n      const<\/span> payload<\/span>:<\/span> CreateChatRoomPayload<\/span> =<\/span> this<\/span>.<\/span>payload<\/span>;<\/span>\n      this<\/span>.<\/span>chatRoomService<\/span>.<\/span>create<\/span>(<\/span>payload<\/span>)<\/span>\n        .<\/span>subscribe<\/span>({<\/span>\n          next<\/span>:<\/span> (<\/span>response<\/span>:<\/span> CreateChatRoomResponse<\/span>):<\/span> void<\/span> =><\/span> {<\/span> this<\/span>.<\/span>createChatRoomSuccess<\/span>(<\/span>response<\/span>);<\/span> },<\/span>\n          error<\/span>:<\/span> (<\/span>error<\/span>:<\/span> ErrorResponse<\/span>):<\/span> void<\/span> =><\/span> {<\/span> this<\/span>.<\/span>createChatRoomFailure<\/span>(<\/span>error<\/span>);<\/span> },<\/span>\n          complete<\/span>:<\/span> ():<\/span> void<\/span> =><\/span> {<\/span> this<\/span>.<\/span>createChatRoomComplete<\/span>();<\/span> }<\/span>\n      });<\/span>\n    }<\/span>\n  }<\/span>\n\n  protected<\/span> createChatRoomSuccess<\/span>(<\/span>result<\/span>:<\/span> CreateChatRoomResponse<\/span>):<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>updateStatusMessage<\/span>(<\/span>result<\/span>.<\/span>message<\/span>);<\/span>\n  }<\/span>\n\n  protected<\/span> createChatRoomFailure<\/span>(<\/span>error<\/span>:<\/span> ErrorResponse<\/span>):<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>updateErrorMessage<\/span>(<\/span>error<\/span>.<\/span>message<\/span>);<\/span>\n    this<\/span>.<\/span>createChatRoomComplete<\/span>();<\/span>\n  }<\/span>\n\n  protected<\/span> createChatRoomComplete<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>stopSubmitting<\/span>();<\/span>\n    this<\/span>.<\/span>completeForm<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> startSubmitting<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>formModel<\/span>.<\/span>startSubmitting<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> stopSubmitting<\/span>():<\/span> void<\/span> {<\/span>\n    this<\/span>.<\/span>formModel<\/span>.<\/span>stopSubmitting<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> createChatRoomForm<\/span>():<\/span> FormGroup<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formModel<\/span>.<\/span>form<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> payload<\/span>():<\/span> CreateChatRoomPayload<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formModel<\/span>.<\/span>value<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> formModel<\/span>():<\/span> ChatRoomForm<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>chatRoomForm<\/span>();<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isFormReady<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formModel<\/span>.<\/span>isFormReady<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isFormValid<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formModel<\/span>.<\/span>isFormValid<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isFormCompleted<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formModel<\/span>.<\/span>isFormCompleted<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isSubmitting<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formModel<\/span>.<\/span>isSubmitting<\/span>;<\/span>\n  }<\/span>\n\n  public<\/span> get<\/span> isNotSubmitting<\/span>():<\/span> boolean<\/span> {<\/span>\n    return<\/span> this<\/span>.<\/span>formModel<\/span>.<\/span>isNotSubmitting<\/span>;<\/span>\n  }<\/span>\n\n  protected<\/span> readonly<\/span> faCheck<\/span> =<\/span> faCheck<\/span>;<\/span>\n  protected<\/span> readonly<\/span> faSpinner<\/span> =<\/span> faSpinner<\/span>;<\/span>\n  protected<\/span> readonly<\/span> faPlus<\/span> =<\/span> faPlus<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631 signal(ChatRoomForm.empty())<\/code> \u0633\u06cc\u06af\u0646\u0627\u0644 \u0631\u0627 \u0628\u0627 \u0641\u0631\u0645 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f \u0627\u0645\u0627 \u0648\u0636\u0639\u06cc\u062a \u0622\u0646 \u0622\u0645\u0627\u062f\u0647 \u0646\u062e\u0648\u0627\u0647\u062f \u0634\u062f \u060c UI \u0648 \u06a9\u062f \u0628\u0627 \u0628\u0631\u0631\u0633\u06cc ISFormReady \u062f\u0631 \u0627\u0644\u06af\u0648\u06cc HTML \u0645\u062d\u0627\u0641\u0638\u062a \u0648 \u0645\u062d\u0627\u0641\u0638\u062a \u0645\u06cc \u0634\u0648\u062f.<\/p>\n
    \n
    @if (isFormReady) {\n  <\/span>\n}\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631 initForm<\/code> \u0631\u0648\u0634 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f ChatRoomForm<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0631\u0648\u0634 \u060c \u0641\u0631\u0645 \u0631\u0627 \u0628\u0627 \u0641\u0631\u0645 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0645\u0627\u062f\u0647 \u0634\u0648\u06cc\u062f \u062a\u0627 \u0628\u0627 \u0622\u0646 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f.<\/p>\n
    \u062f\u0631 openForm<\/code> \u0631\u0648\u0634 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f formReady<\/code> \u062d\u0627\u0644\u062a \u0633\u06cc\u06af\u0646\u0627\u0644 \u0628\u0647 true<\/code> \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a \u0648 \u0641\u0631\u0645 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u062a\u0648\u0633\u0637 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u06cc\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u0634\u0648\u062f.<\/p>\n
    \u062f\u0631 payload<\/code> \u0631\u0648\u0634 Getter \u0645\u0642\u062f\u0627\u0631 \u0641\u0631\u0645 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u062a\u0627\u0642 \u0686\u062a \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. \u0622\u0646 \u0631\u0627 type<\/code> \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f<\/p>\n
    \n
    export<\/span> type<\/span> CreateChatRoomPayload<\/span> =<\/span> {<\/span>\n  title<\/span>:<\/span> string<\/span>;<\/span>\n  description<\/span>:<\/span> string<\/span>;<\/span>\n  guidelinesOrRules<\/span>:<\/span> string<\/span>;<\/span>\n  tags<\/span>:<\/span> string<\/span>;<\/span>\n  visibility<\/span>:<\/span> ChatRoomVisibility<\/span> |<\/span> string<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u0631\u0648\u0634 Payload Getter \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0642\u0628\u0644 \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627 \u060c \u0627\u0632 \u067e\u06cc\u0634 \u067e\u0631\u062f\u0627\u0632\u0634 \u06cc\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062c\u0632\u0626\u06cc\u0627\u062a \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644<\/p>\n
    \n
    public<\/span> get<\/span> payload<\/span>():<\/span> CreateLiveStreamPayload<\/span> {<\/span>\n  const<\/span> data<\/span>:<\/span> CreateLiveStreamPayload<\/span> =<\/span> this<\/span>.<\/span>formModel<\/span>.<\/span>value<\/span>;<\/span>\n  return<\/span> {<\/span>\n    ...<\/span>data<\/span>,<\/span>\n    startDateTime<\/span>:<\/span> addSecondsToDate<\/span>(<\/span>this<\/span>.<\/span>formModel<\/span>.<\/span>startDateTimeValue<\/span>),<\/span>\n    endDateTime<\/span>:<\/span> addSecondsToDate<\/span>(<\/span>this<\/span>.<\/span>formModel<\/span>.<\/span>endDateTimeValue<\/span>),<\/span>\n  };<\/span>\n}<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u0628\u062e\u0634 5: \u0627\u0644\u06af\u0648\u06cc HTML<\/strong><\/p>\n
    \n
    @if (isComponentReady &&<\/span> isFormReady) {\n  \n}\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u0634\u0645\u0627 \u0627\u0632 \u0631\u0648\u0634\u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u062a\u0642\u0648\u06cc\u062a UI \u0648 \u0645\u0646\u0637\u0642 \u0634\u06a9\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n
    \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646:<\/strong><\/p>\n
    \u0686\u0647 \u062f\u0631 \u0645\u0648\u0631\u062f \u06a9\u0627\u0645\u0644 ()\u061f<\/strong><\/p>\n
    \u067e\u06cc\u0634 \u0627\u0632 \u0627\u06cc\u0646 \u060c \u0645\u0646 \u0630\u06a9\u0631 \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 formCompleted<\/code> \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc UI \u0628\u0647 \u0633\u06cc\u06af\u0646\u0627\u0644 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u062c\u0631\u0627\u06cc \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n
    \n
      protected<\/span> formCompleted<\/span>:<\/span> WritableSignal<\/span><<\/span>boolean<\/span>><\/span> =<\/span> signal<\/span>(<\/span>false<\/span>);<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u0627\u062c\u0631\u0627\u06cc \u062f\u0631 \u0634\u06a9\u0644 \u067e\u0627\u06cc\u0647 \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n
    \n
      public<\/span> completeForm<\/span>(<\/span>delayToReset<\/span>:<\/span> number<\/span> =<\/span> 5000<\/span>):<\/span> void<\/span> {<\/span>\n    \/\/ Ensure delay is non-negative<\/span>\n    const<\/span> safeDelay<\/span>:<\/span> number<\/span> =<\/span> Math<\/span>.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> delayToReset<\/span>);<\/span>\n\n    \/\/ Mark the form as completed<\/span>\n    this<\/span>.<\/span>enableFormComplete<\/span>();<\/span>\n\n    \/\/ Set a timer to reset form completion status<\/span>\n    timer<\/span>(<\/span>safeDelay<\/span>).<\/span>pipe<\/span>(<\/span>\n      \/\/ Reset form completion status<\/span>\n      tap<\/span>(()<\/span> =><\/span> this<\/span>.<\/span>disableFormCompleted<\/span>()),<\/span>\n    ).<\/span>subscribe<\/span>();<\/span>\n  }<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u0641\u0631\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0648 completeForm()<\/code> \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062c\u0630\u0627\u0628 \u0642\u0644\u0645 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f<\/p>\n
    \n
    @<\/span>if<\/span> (<\/span>isFormCompleted<\/span>)<\/span> {<\/span><<\/span>fa<\/span>-<\/span>icon<\/span> [<\/span>icon<\/span>]<\/span>=<\/span>\"<\/span>faCheck<\/span>\"<\/span>\/><\/span>}<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u067e\u0633 \u0627\u0632 \u062a\u0623\u062e\u06cc\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 5 \u062b\u0627\u0646\u06cc\u0647 \u060c \u0648\u0636\u0639\u06cc\u062a \u062f\u0648\u0628\u0627\u0631\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f false<\/code> \u0648 \u0628\u0631\u0631\u0633\u06cc \u06cc\u0627 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0646\u0645\u0627\u062f \u0646\u0627\u067e\u062f\u06cc\u062f \u0645\u06cc \u0634\u0648\u062f<\/em>\u0628\u0634\u0631<\/p>\n
    \u062a\u0648\u062c\u0647:<\/strong><\/p>\n
    \u0627\u0644\u0628\u062a\u0647 \u060c \u0631\u0648\u0634 \u0647\u0627 \u062f\u0631 HasForm<\/code> \u0642\u0628\u0644\u0627\u064b \u062f\u0631 formModel<\/code> \u06cc\u0627 BaseForm<\/code>\u0628\u0634\u0631 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644 \u0628\u062d\u062b \u0627\u0633\u062a \u06a9\u0647 \u0622\u06cc\u0627 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0627\u0639\u062b \u0627\u0641\u0632\u0627\u06cc\u0634 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0633\u062a. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0635\u0645\u06cc\u0645 \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 Hasform \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u062e\u06cc \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f formModel<\/code> \u062f\u0631 \u062c\u0632\u0621<\/em> \u06a9\u062f \u06cc\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u0627\u0644\u06af\u0648\u06cc HTML.<\/p>\n
    \u0645\u062e\u0632\u0646: \u062a\u0631\u06a9\u06cc\u0628 \u0641\u0631\u0645 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<\/p>\n
    \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u0646\u062c\u0631 \u0628\u0647 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0628\u0647\u062a\u0631 \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627 \u060c \u0622\u0632\u0645\u0627\u06cc\u0634 \u0622\u0633\u0627\u0646\u062a\u0631 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0645\u06cc \u0634\u0648\u062f. \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u0632 \u0622\u0646 \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
    \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc: \u0641\u0631\u0645 \u0647\u0627\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u0645\u062d\u0648\u0631 \u0628\u0631 \u0648\u0631\u0627\u062b\u062a\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0634\u06cc \u06af\u0631\u0627 (OOP) \u060c \u062a\u0631\u06a9\u06cc\u0628 (HAS-A) \u06cc\u06a9 \u0645\u0641\u0647\u0648\u0645 \u06a9\u0644\u06cc\u062f\u06cc \u0627\u0633\u062a \u060c \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0648\u0631\u0627\u062b\u062a (IS-A)\u0628\u0634\u0631 \u062f\u0631 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u060c \u0645\u0627 \u0627\u063a\u0644\u0628 \u0647\u0646\u06af\u0627\u0645 \u062a\u0632\u0631\u06cc\u0642 \u062e\u062f\u0645\u0627\u062a \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc API \u060c \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646 \u0648 \u063a\u06cc\u0631\u0647 \u0631\u0627 \u0627\u062f\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u0628\u0647 \u0637\u0648\u0631 …<\/p>\n","protected":false},"author":2,"featured_media":105872,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7t5r0yk1ggsh2uk5zpqy.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-105871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=105871"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105871\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/105872"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=105871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=105871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=105871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}