setValue of radio-button with react-hook-form

[ShoshanP]

בטופס עריכת עובד, משתמשת בפונקציה setValue לאתחול שדות הטופס. השדה Gender הוא radioButton, ולא מאותחל בטופס ע"י השמת הערך. כמו"כ משתמשת ב Enum.

בנוסף בשדות של התפקידים - רק השם מתעדכן, ולא ה- checkBox וה Date. מצרפת קישור לקובץ הרלוונטי בפרויקט, וכן צילום מסך של הטופס. https://github.com/ShoshanP/Workers/blob/main/workers-client/src/employee/AddEmployeeForm.jsx

[ElkiGit]

לאחר דין ודברים מרובה עם GPT הגעתי להחלטה איך לעשות זאת מקווה שזה יעזור לך מעתיקה קטעי קוד נבחרים:

Gender

                <div>
                    <input type="radio" {...register("type", { required: true })} value="0" checked={isexist?.type === 0} />
                    <label>Male</label>
                </div>
                <div>
                    <input type="radio" {...register("type", { required: true })} value="1" checked={isexist?.type === 1} />
                    <label>Female</label>
                </div>

תאריך

Start Role

                        <input
                            {...register("startWork", { required: true })}
                            type="date"
                            defaultValue={isexist ? new Date(isexist.startWork).toISOString().split('T')[0] : ''}
                        />

[estyxxxx]

גם אני נתקלתי באותה בעיה של אתחול שדה מסוג radio, רק באנגולר. יש לכם מושג איך פותרים את זה באנגולר?

[batyahuz]

זה הקוד שלי:

<div class="card-body">
      <div class="form-group form-floating mb-3">
          <div id="gender" class="forSelectLable" for="gender">Select Gender:
          </div>
          <div class="form-check">
              <input class="form-check-input" type="radio" name="gender" id="male"
                  [value]="0" formControlName="gender">
              <label class="form-check-label" for="male"> male </label>
          </div>
          <div class="form-check">
              <input class="form-check-input" type="radio" name="gender" id="female"
                  [value]="1" formControlName="gender">
              <label class="form-check-label" for="female"> female </label>
          </div>
      </div>
</div>

וה GENDER הוא מסוג ENUM: export enum GENDER { male, female } ה FORM מוגדר כך:

gender: [this.employee.gender, [Validators.required]],

מקווה שעזר :)

[estyxxxx]

תודה רבה! עזר לי מאוד! משאירה איך הקוד נראה בסוף בשביל מי שאצלה זה מסוג boolean:

<input type="radio" [value]="false" [checked]="!this.employee?.isFemale" formControlName="isFemale">Male<br />
<input type="radio" [value]="true" [checked]="this.employee?.isFemale" formControlName="isFemale">Female<br />

[Nanif]

@ShoshanP

הסתדר לך?

[ShoshanP]

תודה ,ברוך ד' כמעט הכול כן - חוץ מהתאריך - שם עוד לא מצאתי איך להגדיר ערך ברירת מחדל...